Tengo un botón 'Guardar'.
Al hacer clic en el botón 'Guardar', creo un botón dinámico en JS.
El nombre del botón dinámico está formateado por el valor de una variable.
Establecí el atributo ID del nuevo botón dinámico para que sea igual al valor de la variable anterior.
Cuando hago clic en el nuevo botón dinámico, funciona. Imprime el valor de la variable adjunta.
Problema : cuando creo un segundo botón dinámico, ese botón también funciona. Pero el botón anterior ya no funciona, por alguna razón imprime el nuevo valor de la variable.
function saveNewProject(){ userProject++; titleInputValue = document.getElementById("rightBottomContainerContentContainerContent1ElementId").value; newElement = document.createElement("button"); newElement.setAttribute("type", "button"); newElement.setAttribute("id", userProject); console.log(newElement); newElement.innerText = `${userProject} - ${titleInputValue}`; console.log(newElement); oldElement = document.getElementById("leftBottomContainerContentContainerContentElementId"); oldElement.appendChild(newElement); newElementLine = document.createElement("br"); oldElement.appendChild(newElementLine); console.log(newElement); newElement.addEventListener("click", function(){ asd = newElement.getAttribute("id"); console.log(asd); console.log(newElement); }); }Soy nuevo en el desarrollo de sitios web, este es mi tercer día. De forma anticipada, muchas gracias por su ayuda.
Use "esto" dentro de su controlador de eventos
Hay un error común de principiante en su código. newElement se actualiza cada vez que agrega un nuevo botón. Y todos los controladores de eventos de botón usan el valor más reciente y muestran el "id" del último botón agregado.
Para que funcione, deberá cambiar la línea de código que se muestra a continuación. En lugar de newElement, usa "this". Y dentro de un controlador de eventos, "esto" significa el elemento al que se adjunta el evento. Entonces this.id devuelve la ID de sí mismo en lugar del último botón agregado.
Pruebe el fragmento de código para ver cómo funciona.
// asd = newElement.getAttribute("id"); // <-- incorrect asd = this.getAttribute("id"); // <-- correct let userProject = 0; function saveNewProject(){ userProject++; titleInputValue = document.getElementById("rightBottomContainerContentContainerContent1ElementId").value; newElement = document.createElement("button"); newElement.setAttribute("type", "button"); newElement.setAttribute("id", userProject); console.log(newElement); newElement.innerText = `${userProject} - ${titleInputValue}`; //console.log(newElement); oldElement = document.getElementById("leftBottomContainerContentContainerContentElementId"); oldElement.appendChild(newElement); newElementLine = document.createElement("br"); oldElement.appendChild(newElementLine); //console.log(newElement); newElement.addEventListener("click", function(){ // asd = newElement.getAttribute("id"); // <-- incorrect asd = this.getAttribute("id"); // <-- correct console.log("You clicked button " + asd); //console.log(newElement); }); } <div id="leftBottomContainerContentContainerContentElementId" value="left"> <input id="rightBottomContainerContentContainerContent1ElementId" value="title" /> <button onclick="saveNewProject()">Save</button> <br/> </div>