I am trying to pass multiple parameters in a 'onclick' but it is not working and JS gave me headaches.
When clicking the 'div' and going to agregarADetalleMenu gives me this 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);
});
}Do you mean this?
Note I wrapped the function values in quotes - you nested your quotes
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("")
);
}
This is better
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("")
);
}
and then have
$('#cards-productos').on("click",".agregar",function() {
agregarADetalleMenu(this.dataset.id,this.dataset.val,this.dataset.price)
})
You're missing quotes around the values being passed in to the function. Because you already used single and double quotes in your string, you can use escaped single (or double) quotes as follows:
onclick="agregarADetalleMenu(\'' + val.id + '\', \'' + val.name + '\', \'' + val.price + '\')"