Link onlick with a function

Question

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)
})

Answer 1

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);