Estoy tratando de pasar múltiples parámetros en un 'onclick' pero no funciona y JS me dio dolores de cabeza.
Al hacer clic en el 'div' e ir a agregarADetalleMenu me da este error:
SyntaxError: missing ) after argument list
function LlenarTableMenu(data) { $('#cards-productos').empty(); $.each(data, function(i, val) { var block2 = '<div class="col-4 col-md-6" onclick="agregarADetalleMenu(' + val.id + ', ' + val.name + ', ' + val.price + ')">' + '<figure class="card card-product"> ' + '<div class="img-wrap">' + ' <img src="' + val.imagen + '">' + @* '<center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>' + *@ '</div>' + '<figcaption class="info-wrap">' + '<a href="#" class="title">' + val.name + '</a>' + '<div class="action-wrap"> ' + '<div class="price-wrap h5">' + @* '<span class="price-new">' + val.price.toFixed(2) + '</span>' + *@ '<span style="display: none;" class="catid">' + val.id + '</span>' + '</div>' + '</div>' + '</figcaption> ' + '</figure> ' + '</div>'; $("#cards-productos").append(block2); }); }¿Quieres decir esto?
Tenga en cuenta que envolví los valores de la función entre comillas: usted anidó sus comillas
function LlenarTableMenu(data) { $('#cards-productos').html( data.map(val => `<div class="col-4 col-md-6" onclick="agregarADetalleMenu('${val.id}','${val.name}',${val.price})"> <figure class="card card-product"> <div class="img-wrap"> <img src="${val.imagen}"> <center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center> </div> <figcaption class="info-wrap"> <a href="#" class="title">${val.name}</a> <div class="action-wrap"> <div class="price-wrap h5"> <span class="price-new">${val.price.toFixed(2)}</span> <span style="display: none;" class="catid">${val.id}</span> </div> </div> </figcaption> </figure> </div>`).join("") ); }Esta es mejor
function LlenarTableMenu(data) { $('#cards-productos').html( data.map(val => `<div class="agregar col-4 col-md-6" data-id="${val.id}" data-name="${val.name}" data-price="${val.price}"> <figure class="card card-product"> <div class="img-wrap"> <img src="${val.imagen}"> <center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center> </div> <figcaption class="info-wrap"> <a href="#" class="title">${val.name}</a> <div class="action-wrap"> <div class="price-wrap h5"> <span class="price-new">${val.price.toFixed(2)}</span> <span style="display: none;" class="catid">${val.id}</span> </div> </div> </figcaption> </figure> </div>`).join("") ); }y luego tener
$('#cards-productos').on("click",".agregar",function() { agregarADetalleMenu(this.dataset.id,this.dataset.val,this.dataset.price) })Le faltan comillas alrededor de los valores que se pasan a la función. Debido a que ya usó comillas simples y dobles en su cadena, puede usar comillas simples (o dobles) con escape de la siguiente manera:
onclick="agregarADetalleMenu(\'' + val.id + '\', \'' + val.name + '\', \'' + val.price + '\')"