Estoy haciendo un proyecto sobre agregar al carrito. Quiero pasar el evento con un clic desde innerhtml.
Aquí está mi código html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Add to cart</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <div id="cards-container" class="row align-items-center my-3 p-3"></div> <script src="./script.js"></script> </body> </html>Aquí está mi código js
fetch('https://jsonplaceholder.typicode.com/users') .then(res=>res.json()) .then(data=>show(data)) function show(data){ const cardsContainer = document.getElementById('cards-container'); cardsContainer.innerHTML=''; data.map(element => { const cardDiv = document.createElement('div') cardDiv.className= "col-md-4" cardDiv.innerHTML=` <div class='card p-5 m-1'> <h3>${element.name}</h3> <h5>${element.email}</h3> <button class="btn btn-primary" id='card-button' onclick='setLocalStorage(e)'>Add to Card</button> </div> ` cardsContainer.appendChild(cardDiv); }); } function setLocalStorage(e){ console.log("clicked",e) }Recibí este error en la consola https://d.pr/i/JCjI77
También me he encontrado con este problema varias veces antes.
Primero, sugeriría usar jquery de todos modos. Cuando escribo html simple, casi siempre uso jquery. Hace que la interacción con el DOM sea mucho más fácil. Así que aquí hay un ejemplo en jquery del evento onClick para un elemento con id="card-button". Un evento de clic normal no funcionará desde jquery aquí. Debe configurarlo en el documento y luego configurar un selector:
fetch('https://jsonplaceholder.typicode.com/users') .then(res=>res.json()) .then(data=>show(data)) function show(data){ const cardsContainer = $('#cards-container'); cardsContainer.html(""); data.map(element => { cardsContainer.append(` <div class='card p-5 m-1 col-md-4'> <h3>${element.name}</h3> <h5>${element.email}</h3> <button class="btn btn-primary" id='card-button'>Add to Card</button> </div> ` }); } $(document).on("click", "#card-button", function(e) { setLocalStorage(e) // or you can just place the contents of setLocalStorage directly // into here! }) function setLocalStorage(e){ console.log("clicked",e) }puede eliminar onClick del elemento de botón aquí. Asegúrese de recordar importar jquery. Idealmente la versión minificada.
PERO TIENES OTRO ASUNTO MAS IMPORTANTE
está creando varios botones para agregar tarjetas con la misma identificación (botón de tarjeta). necesita configurar card-button como una clase. De esta manera se pueden aplicar múltiples elementos. Sugeriría agregar una ID al botón o cardDiv que está asociado con el ID de usuario, el índice o cualquier otro identificador único. De esta manera, puede reconocer qué botón de usuario o tarjeta se está presionando y actuar en consecuencia. Aquí está el jQuery actualizado con clase en lugar de ID
fetch('https://jsonplaceholder.typicode.com/users') .then(res=>res.json()) .then(data=>show(data)) function show(data){ const cardsContainer = $('#cards-container'); cardsContainer.html(""); data.map(element => { cardsContainer.append(` <div class='card p-5 m-1 col-md-4'> <h3>${element.name}</h3> <h5>${element.email}</h3> <button class="btn btn-primary" class="card-button" id='some-unique-id'>Add to Card</button> </div> ` }); } $(document).on("click", ".card-button", function(e) { setLocalStorage(e) // or you can just place the contents of setLocalStorage directly into here! // Here you can grab the jquery object with $(this), or use the // ID with e.target.id with the e.target.id, etc... clickedButton = $(this); clickedButtonID = e.target.id; }) function setLocalStorage(e){ console.log("clicked",e) }No uso HTML simple sin jQuery a menudo, por lo que no puedo responder con certeza si desea tomar esa ruta. Parece que este hilo anterior responde esa pregunta, definitivamente mejor que yo.
no se puede usar getElementById en un elemento HTML que aún no se ha agregado al documento
¡¡La mejor de las suertes!!