Tengo una serie de listas de productos (con identificación única, nombre, precio, etc.) en "products.html" (con js)
Cada producto tiene un botón, "MÁS INFO".
Quiero hacer clic en ese botón y ver el detalle de ESE producto (cada producto tiene un detalle de información diferente, que termina en otro html (detalle.html)).
Mi código:
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) })Parece que desea utilizar atributos de datos. Una explicación completa de ellos está en MDN: https ://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes... pero la idea básica es que puedes hacer:
<button id="dateButtton" date-size="xl"/>y luego en javascript:
document.querySelector('#dateButton').dataset.sizepara acceder a ella. O, dentro de un controlador de clic de botón:
const clickHandler = e => console.log(e.target.dataset.size);