¿Por qué la variable (ndev) no se agrega a la clase de campo agregada? Estoy tratando de agregar la variable ndev a la clase de campo agregado cuando el usuario hace clic en el botón... ¿cuál es el problema aquí? codigo js
//1>>> first step is to creat div with the value which the user add //get the value const inputvalue=document.querySelector("input").value; //create element const div =document.createElement("div"); //adding the value and the button to it const ndev=div.innerHTML=`${inputvalue}<input type="submit" value="delete" >`; //2>>> style this div div.classList.add("styleddiv"); const nst =document.querySelector(".styleddiv") //add event listener document.getElementById("button").addEventListener("click", function() { document.getElementsByClassName("addedfield").appendChild(ndev); } );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>Document</title> <link rel="styleSheet" href="../cssjsfirst practice.css"> </head> <body> <div class="container"> <form action=""> <input type="text" placeholder="type a task" autofocus> <input type="submit" value="Add Task" id="button"> </form> <div class="addedfield"> </div> </div> <script src="first js practice.js"></script> </body> </html>document.querySelector("input") no es lo suficientemente preciso, probablemente debería agregar la clase de "input" a su primera entrada de tipo "texto".
getElementsByClassName devuelve una matriz de elementos HTML. Debería intentar cambiarlo a getElementsByClassName[0]
Es una buena idea evitar que se actualice la página después de hacer clic en enviar agregando onsubmit="return false" a su elemento de formulario HTML.
Esta línea:
const ndev=div.innerHTML=`${inputvalue}<input type="submit" value="delete" >`;en realidad no crea un elemento HTML.
const inputvalue=document.querySelector("input").value; //create element const div =document.createElement("div"); //adding the value and the button to it const ndev=div.innerHTML=`${inputvalue}<input type="submit" value="delete" >`; //2>>> style this div div.classList.add("styleddiv");se ejecuta solo una vez, justo después de cargar el script. Sería mejor mover esta funcionalidad a la función eventListener, de modo que obtenga la entrada del usuario después de que presione el botón, y no al cargar la página.
Por favor, eche un vistazo a esta versión de HTML y JS:
<!-- index.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>Document</title> <link rel="styleSheet" href="../cssjsfirst practice.css"> </head> <body> <div class="container"> <form action="" onsubmit="return false"> <input class="input" type="text" placeholder="type a task" autofocus> <input type="submit" value="Add Task" id="button"> </form> <div class="addedfield"> </div> </div> <script src="practice.js"></script> </body> </html> // practice.js document.getElementById("button").addEventListener("click", function() { const inputvalue=document.querySelector(".input").value; const div =document.createElement("div"); div.innerHTML=`${inputvalue}<input type="submit" value="delete" >`; div.classList.add("styleddiv"); document.getElementsByClassName("addedfield")[0].appendChild(div); } ); como puede ver, solo después de que el usuario haga clic en el botón, asignamos el valor del elemento HTML de la clase "input" a inputvalue , y luego creamos el elemento "div" y lo llenamos con el HTML interno de su elección.