0

Hola al usar el closest junto al boton con el metodo onclick este me genera que la propiedad closest esta indefinida si reviso en la inpecccion del navegador pestaña elemnts me genera este error si quito el onclick del boton este pasa sin problemas el tema esq necesito ese id me muestra bien el boton sin errores de hecho si hago un console.log me muestra el boton alguna solucion? los leo

<table id="articulos"class="table">
        <thead>
 
            <tr>
 
            <TH>id </TH>
                <TH>Codigo</TH>
                <TH>producto</TH>
                <TH>cantidad_disponible</TH>
                <TH>Añadir</TH>
 
            </tr>
        </thead>
        <tbody  id="productos_content">
 
            @foreach($Variables as $e)
            <tr class="tr">
            <?php
                # Creamos el boton con la función de php PRINTF y concatenamos la variable para enviarla a javascript
                //printf('<tr class="tr" id="P_' . $e->id_productos . '">');
            ?>
 
            <td class="id_n">{{$e->id_productos}}</td>
                <td class="id_prod">{{$e->id_productos}}</td>
                <td class="codigo">{{$e->codigo}}</td>
                <td class="nombre"> {{$e->nombre}}</td>
                <?php
                # Creamos el boton con la función de php PRINTF y concatenamos la variable para enviarla a javascript
              printf('<td class="cantidad_disponible" id="Q_' . $e->id_productos .'">'. $e->cantidad_disponible.'</td>');
            ?>
 
              <td class="td">
              <!-- <button  class="button">Añadir</button> -->
               <?php
                # Creamos el boton con la función de php PRINTF y concatenamos la variable para enviarla a javascript
           printf('<button  class="button" onclick="addToCarritoItem(' . $e->id_productos . ')">Añadir</button>');
            ?>
        </td>
 
        </tr> 
        @endforeach
 
        </tbody>
    </table>
 
      </div>
 
 
 
Uncaught TypeError: Cannot read properties of undefined (reading 'closest')
 
function addToCarritoItem(e,id){
    const button = e.target;
    console.log(button)
    const item = button.closest('.tr');
 
    const id_prod = item.querySelector('.id_n').textContent;

1 respuesta 1

1

tu función espera el evento y el id de producto, Tú sólo envías el ID,

<button class="button" onclick=" addToCarritoItem(1)">Añadir</button>

y la función intena intenta obtener el target de un número y falla.

EDIT: la sugerencia original era usar un closure, pero no funciona. Dejo una mejor solución

Puedes aprovechar que, en el contexto del onclick this alude al elemento clickeado. Entonces, en vez de obtener el botón de e.target le pasas el elemento directo a la función:

<button class="button" onclick="addToCarritoItem(this,1)">Añadir</button>

Y queda como sigue:

function addToCarritoItem(button, id) {
  const item = button.closest('.tr');
  const id_prod = item.querySelector('.id_n').textContent;
  const nombre = item.querySelector('.nombre').textContent;
  const div=document.createElement('li')
  div.textContent =nombre+', id::'+ id_prod;
  document.querySelector('.result ul').appendChild(div)
}
td {
  border: 1px solid #aaa;
  padding: 4px;
}

tr {
  border: 1px solid #aaa;
}
<table>
  <tr class="tr">
    <td class="id_n">1</td>
    <td class="id_prod">1</td>
    <td class="codigo">EAN_001</td>
    <td class="nombre">Harina de otro costal</td>

    <td class="td">
      <button class="button" onclick=" addToCarritoItem(this,1)">Añadir</button>
    </td>
  </tr>
    <tr class="tr">
    <td class="id_n">2</td>
    <td class="id_prod">2</td>
    <td class="codigo">EAN_002</td>
    <td class="nombre">Producto 2</td>

    <td class="td">
      <button class="button" onclick=" addToCarritoItem(this,2)">Añadir</button>
    </td>
  </tr>
</table>
<div class="result">Selección:<ul></ul></div>

Slución original que no funciona: El closure no se ejecuta

<button class="button" onclick="(e)=> addToCarritoItem(e,1)">Añadir</button>

function addToCarritoItem(e, id) {
console.log(e)
  const button = e.target;
  console.log(button)
  const item = button.closest('.tr');

  const id_prod = item.querySelector('.id_n').textContent;
  console.log(id_prod)
  document.querySelector('.result').textContent ='Seleccion:'+ id_prod;
}
td {
  border: 1px solid #aaa;
  padding: 4px;
}

tr {
  border: 1px solid #aaa;
}
<table>
  <tr class="tr">
    <td class="id_n">1</td>
    <td class="id_prod">1</td>
    <td class="codigo">EAN_001</td>
    <td class="nombre">Harina de otro costal</td>

    <td class="td">
      <button class="button" onclick="(e)=> addToCarritoItem(e,1)">Añadir</button>
    </td>

  </tr>
</table>
<div class="result"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.