Cargué mi archivo .json local con fetch y registré un controlador de eventos en un elemento de botón.
Aquí está mi código:
let tagName; function start(){ fetch("./product.json") .then(response=>response.json()) .then(data=>addItem(data,tagName)) .catch(error=>console.log(error)); } start(); function addItem(data,tagName){ var container = document.getElementById("itemBox"); for(let i=0;i<data.length;i++){ var div = document.createElement("div"); var img = data[i].itemImg; div.className = "imgBox"; div.innerHTML = "<img src= "+img+">"; container.appendChild(div); } }; let tagBtn = document.getElementById("tagsubmit"); tagBtn.onclick = function(){ document.getElementById("tmp").innerHTML = "HELPME"; }Cuando abrí este archivo html, el archivo json se cargó y se procesó correctamente, pero el botón con el controlador de eventos no funciona.
¿Cómo puedo hacer que ambos funcionen correctamente?
Intente utilizar la función de delegación de eventos, así:
document.getElementById('itemBox').addEventListener('click', (event) => { if (event.target.id === 'tagsubmit') { document.getElementById('tmp').innerHTML = 'HELPME'; } });Buen tutorial de Dmitri Pavlutin: https://dmitripavlutin.com/javascript-event-delegation/