I have an array of list of products, (with unique id, name, price, etc) at "products.html" (with js)
Each product has a button, "MORE INFO".
I want to click on that button, and see the detail of THAT product (each product has different information detail, ending in another html (detail.html)).
My code:
const listShirts = document.getElementById('shirts')
shirts.map((prod, i ) => {
let card = document.createElement('div')
card.classList.add('row')
card.innerHTML = `
<div class="col-sm-6 col-md-3" style="padding-top: 1.5rem;">
<div class="card conLink" onclick="moreShirt(i)" >
<img src="${prod.img}" class="card-img-top welcome-imagen" alt="">
<div class="card-body">
<h5 class="card-title welcome-titulo" alt="">${prod.name}</h5>
<span class="card-title welcome-precio" alt="" >$ ${prod.price}</span >
<div>
<div class="welcome-color1" style="display: inline-block;"></div>
<div class="welcome-color2" style="display: inline-block;"></div>
<div class="welcome-color3" style="display: inline-block;"></div>
</div>
<div class="btn btn-primary welcome-vermas-producto" >MORE INFO</div>
</div>
</div>
</div>`
listaRemeras.appendChild(card)
})
It sounds like you want to use data attributes. A full explanation of them is on the MDN: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes ... but the basic idea is that you can do:
<button id="dateButtton" date-size="xl"/>
and then in javascript:
document.querySelector('#dateButton').dataset.size
to access it. Or, inside a button click handler:
const clickHandler = e => console.log(e.target.dataset.size);