JS：添加带有动态文本输入的列表元素

Question

我有什么：当用户单击带有 .

我想要的是：用户可以动态输入输入，输入将用作列表元素的文本

什么不起作用：它不保存输入的值，它总是显示为空。 我怀疑这与未加载数据并仍在使用默认值有关，但我不确定..几天前开始使用 js，所以我对 DOM 概念相当陌生。

 var userInput = document.getElementById("userChoice").value; var textNodeValue = userInput; // remove a list element when the user clicks on remove item function deleteElement(clicked_id) { //save list element var clickedButton = document.getElementById(clicked_id); console.log(clickedButton); var parentNodeLi = clickedButton.parentElement; var listElement = parentNodeLi.parentElement; listElement.removeChild(parentNodeLi); } // adds a new list item function addListItem(textNodeValue) { //add list item, button and image to button var newElem = document.createElement("li"); var newButton = document.createElement("button"); var newImage = document.createElement("img"); //add text nodes var newNode = document.createTextNode(textNodeValue); var newNodeButton = document.createTextNode(""); newImage.src = "button_delete.jpg"; //add src for image newImage.height = 15; //add id to the button var nodeList = document.getElementsByTagName("li"); var idIncrementor = nodeList.length + 1; console.log(idIncrementor); newButton.setAttribute("id", "button".concat(idIncrementor)); console.log(newButton.getAttribute("id")); //add anonymous function to the evenListerner to call the deleteElement function //use it for parameter to the onclick function newButton.addEventListener('click', function() { deleteElement(newButton.getAttribute("id")) }); // add the image for the button newButton.appendChild(newImage); //append text node and button to the new list element newElem.appendChild(newNode); newElem.appendChild(newButton); //get the unorderedList and append the new list var unorderedList = document.getElementById("list"); unorderedList.appendChild(newElem); }

 <div id="newItemContainer"> <input id="userChoice"> <button onclick="addListItem(textNodeValue)">Add item </button> </div> <div id="shoppingListContainer"> <ul id="list"> <li>List 1 <button class="listItems" id="button1" onclick="deleteElement(this.id)"><img src="button_delete.jpg" height=15/> </button> </li> <li>List 2 <button class="listItems" id="button2" onclick="deleteElement(this.id)"><img src="button_delete.jpg" height=15/> </button></li> <li>List 3 <button class="listItems" id="button3" onclick="deleteElement(this.id)"><img src="button_delete.jpg" height=15/> </button></li> <li>List 4 <button class="listItems" id="button4" onclick="deleteElement(this.id)"><img src="button_delete.jpg" height=15/></button></li> </ul> </div>

Answer 1

您遇到了这个问题，可能是因为对 html 处理 JS 脚本的方式不清楚。

基本上，当 html 页面加载时，它会加载 JS 文件，并逐行“执行”它。 不在函数内部的所有内容都会被执行，因此脚本根（在任何函数之外）的任何变量都会立即被评估。 这对您来说意味着，一旦 JS 加载，vars userInput和textNodeValue就会获得分配的值，并且该值是默认值，一个空白字符串，正如您正确的想法。

不要在 JS 加载后立即分配这些变量的值，您应该做的是将两行代码从顶部移动到函数addListItem内部。 因此，你的函数应该变成：

function addListItem() {
    var userInput = document.getElementById("userChoice").value;
    var textNodeValue = userInput;

    // so on

通过这样做，发生的事情是 JS 在用户单击“添加项目”时读取输入的值，从而实现您想要的。