Este es mi código HTML, es simple, solo un bloque div con botón.
<!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>Button Problem</title> <style> </style> </head> <body> <div class="users"> <button value ="0" id="button1">CLICK ME</button> </div> <script src="./script.js"></script> </body> </html>y aquí está mi código JavaScript:
document.getElementById("button1").onclick = function () { let el = document.querySelector(".users"); el.innerHTML += `<button id="button2">LEGIT BUTTON</button>`; } document.getElementById("button2").onclick = function(){ console.log("button2 is working!!!"); }entonces, en el código HTML, como puede ver, tengo un botón en el bloque div. en JavaScript pongo onclick en ese botón y después de hacer clic en ese botón se agrega un nuevo botón en DOM. pero recibo el error "Error de tipo no detectado: no se pueden establecer las propiedades de nulo (configurando 'onclick') en" Quiero que el segundo clic espere a que ocurra el primer clic para agregar un nuevo botón. ¿Qué tengo que hacer?
debe llamar a document.getElementById("button2").onclick después de agregar este nuevo button2 al DOM
Según ese código, está intentando agregar un detector de eventos al botón 2 antes de que se agregue al dom. Intente moverlo así para asegurarse de que exista primero:
document.getElementById("button1").onclick = function () { let el = document.querySelector(".users"); el.innerHTML += `<button id="button2">LEGIT BUTTON</button>`; // it will now exist and you can add a listener document.getElementById("button2").onclick = function(){ console.log("button2 is working!!!"); } }Sería más claro crear el elemento dom y agregarle el oyente directamente después de crearlo:
document.getElementById("button1").addEventListener("click", function () { let el = document.querySelector(".users"); // Create the element using the API let btn = document.createElement("button"); // Add element details (you don't need the ID anymore // because we'll use the javascript DOM element directly) btn.setAttribute("id", "button2"); btn.innerText = "LEGIT BUTTON"; // Add event listener btn.addEventListener("click", function(){ console.log("button2 is working!!!"); }); // Append the new button to the element el.appendChild(btn); });