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;