es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Por qué la variable (ndev) no se agrega a la clase “added field”?

30 Jul, 2023 Programación

¿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>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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 a appendChild en la colección, no sabe a qué elemento debe agregar la variable ndev.

    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 clase addedfield, por lo que puedes usar el método querySelector en su lugar para obtener un solo elemento y agregar la variable ndev a él.

    Aquí está el código actualizado:

    document.getElementById("button").addEventListener("click", function() {
   const addedField = document.querySelector(".addedfield");
   addedField.appendChild(div);
});

Comments are closed.