【问题标题】：why do the (ndev) variable not added to the added field class为什么（ndev）变量没有添加到添加的字段类中
【发布时间】：2021-12-30 18:04:13
【问题描述】：

为什么 (ndev) 变量没有添加到添加的字段类中？当用户单击按钮时，我试图将 ndev var 附加到 addedfield 类......这里有什么问题？ 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);
    
    }
);

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>

【问题讨论】：

标签： javascript html dom events

【解决方案1】：

错误

document.querySelector("input") 不够精确，您可能应该将“input”类添加到您的第一个“text”类型的输入中。
getElementsByClassName 返回一个 HTML 元素数组。您应该尝试将其更改为 getElementsByClassName[0]
在您的 HTML 表单元素中添加 onsubmit="return false" 以防止在单击提交后刷新页面是个好主意。
这一行：

const ndev=div.innerHTML=`${inputvalue}<input type="submit" value="delete" >`;

实际上并不创建 HTML 元素。

您的 Javascript 代码的一部分：

    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");

只执行一次，就在你加载脚本之后。最好将此功能移至 eventListener 函数，这样您就可以在用户按下按钮后而不是在页面加载时获得输入。

可能的答案

请看一下这个版本的 HTML 和 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);
    }
);

如你所见，只有在用户点击按钮后，我们将“input”类的HTML元素的值赋值给inputvalue，然后我们创建“div”元素，然后用您选择的 innerHtml 填充它。

【讨论】：

我将其更改为查询选择器，但我仍然有同样的问题，为什么不能将 ndev 附加到 addedfield div？
@ayaabdelhakeem 请看看我编辑的答案