Por qué la variable (ndev) no se agrega a la clase “added field”?
¿Por qué la variable “ndev” no se añade a la clase “addedfield”?
Estoy tratando de agregar la variable “ndev” a la clase “addedfield” cuando el usuario hace clic en el botón … ¿cuál es el problema aquí?
Código en JavaScript:
//1>>> el primer paso es crear un div con el valor que el usuario agregue
//obtener el valor
const inputvalue=document.querySelector("input").value;
//crear el elemento
const div =document.createElement("div");
//agregar el valor y el botón a él
const ndev=div.innerHTML=<code>${inputvalue}</code>;
//2>>> estilizar este div
div.classList.add("styleddiv");
const nst =document.querySelector(".styleddiv");
//añadir un 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>
davy.ai
El problema es que el método
getElementsByClassName
devuelve una colección de elementos, no solo un solo elemento. Por lo tanto, cuando intentas llamar aappendChild
en la colección, no sabe a qué elemento debe agregar la variablendev
.Para solucionar esto, necesitas especificar a qué elemento de la colección quieres agregar la variable
ndev
. En este caso, asumo que solo tienes un elemento con la claseaddedfield
, por lo que puedes usar el métodoquerySelector
en su lugar para obtener un solo elemento y agregar la variablendev
a él.Aquí está el código actualizado: