无法弄清楚为什么它不起作用了

Question

So been trying to learn more javascript, by doing small projects that are simple but are starting stuff.所以一直试图通过做一些简单但开始的小项目来学习更多的 javascript。 One of the projects is a to-do app which for some people is really simple, but for me as a starter it's quite complex.其中一个项目是一个待办事项应用程序，对某些人来说非常简单，但对我作为初学者来说却相当复杂。

Now here is the thing, I had it working for the most part, I can add stuff, and one thing only HALF works, I wrote a bit that adds a X button to a li element.现在事情是这样的，我让它在大多数情况下工作，我可以添加东西，而且一件事只有 HALF 有效，我写了一点，将 X 按钮添加到 li 元素。 Now it works when I put the li element in the HTML page itself, but when it's added through javascript, it doesn't.现在当我将 li 元素放在 HTML 页面本身时它可以工作，但是当它通过 javascript 添加时，它不会。

There is no error, it was working before but for some reason it.. broke.没有错误，它以前可以工作，但由于某种原因它..坏了。

<!DOCTYPE html>
<head>
    <title>To Do App!</title>
    <link rel="stylesheet" type="text/css" href="CSS/stylesheet.css">
    
</head>
<body>
    <div id="h1Div">
        <h1> To-do app! </h1>
        <input type="text" id="inputForList">
        <input type="button" id="btnInput" value="Add me!" onclick="btnFunction()">
    </div>

    <ul id="ulSection">
        <li>Test 1</li>
        <li>Test 2</li>
    </ul>
    <script src="Scripts/javascript.js"></script>
</body>

This is the HTML page, super simple.这是HTML页面，超级简单。


//Adds li element with input from a textbox
function btnFunction(){
    var cLi = document.createElement("li");
    var inpList = document.getElementById("inputForList").value;
    var txtNode = document.createTextNode(inpList);
    cLi.appendChild(txtNode);

    //Check to see if anything is filled in, otherwise send message. And 'appends' it to the list item
    if(inpList === ''){
        alert("Voeg wat toe!");
    } else {
        document.getElementById("ulSection").appendChild(cLi);
    }
    // Reset value of Textbox to ""
    document.getElementById("inputForList").value = "";
}

//Sets a 'x' on every element.
var ulList = document.getElementsByTagName("li");
var i;
for(i = 0; i < ulList.length; i++){
    var span = document.createElement("span");
    var xBtn = document.createTextNode("\u00D7");
    span.className = "Done";
    span.appendChild(xBtn);

    ulList[i].appendChild(span);
}

And this is the Javascript.这就是 Javascript。

As stated, it worked before.如前所述，它以前有效。 But for some reason, now the bottom section, the X button (\×) part, it sn't working on the 'new stuff' that I add through the text input..但是出于某种原因，现在底部的 X 按钮 (\×) 部分无法处理我通过文本输入添加的“新内容”。

Answer 1

Your code is good, you just need to do the same thing you did in你的代码很好，你只需要做同样的事情

  var ulList = document.getElementsByTagName("li");
  var i;
  for (i = 0; i < ulList.length; i++) {
    var span = document.createElement("span");
    var xBtn = document.createTextNode("\u00D7");
    span.className = "Done";
    span.appendChild(xBtn);

    ulList[i].appendChild(span);
  }

in btnFunction() (with the exception of the for loop, which isn't needed in the function, as only one element is added at a time).在btnFunction() （除了for循环，它在函数中不需要，因为一次只添加一个元素）。 The reason for this is your code only runs when the page is loaded, or when it is specifically told to run (in your case, on a button click).原因是您的代码仅在页面加载时运行，或者当它被明确告知运行时（在您的情况下，在单击按钮时）。 if you just create an element the js doesn't know to update it with an x , you have to tell it to do so.如果你只是创建一个元素，js 不知道用x更新它，你必须告诉它这样做。

 //Adds li element with input from a textbox function btnFunction() { var cLi = document.createElement("li"); var inpList = document.getElementById("inputForList").value; var txtNode = document.createTextNode(inpList); cLi.appendChild(txtNode); //Check to see if anything is filled in, otherwise send message. And 'appends' it to the list item if (inpList === '') { alert("Voeg wat toe!"); } else { document.getElementById("ulSection").appendChild(cLi); var ulList = document.getElementsByTagName("li"); var span = document.createElement("span"); var xBtn = document.createTextNode("\×"); span.className = "Done"; span.appendChild(xBtn); ulList[ulList.length-1].appendChild(span); } // Reset value of Textbox to "" document.getElementById("inputForList").value = ""; } //Sets a 'x' on every element. var ulList = document.getElementsByTagName("li"); var i; for (i = 0; i < ulList.length; i++) { var span = document.createElement("span"); var xBtn = document.createTextNode("\×"); span.className = "Done"; span.appendChild(xBtn); ulList[i].appendChild(span); }

 <!DOCTYPE html> <head> <title>To Do App!</title> <link rel="stylesheet" type="text/css" href="CSS/stylesheet.css"> </head> <body> <div id="h1Div"> <h1> To-do app! </h1> <input type="text" id="inputForList"> <input type="button" id="btnInput" value="Add me!" onclick="btnFunction()"> </div> <ul id="ulSection"> <li>Test 1</li> <li>Test 2</li> </ul> <script src="Scripts/javascript.js"></script> </body>

无法弄清楚为什么它不起作用了

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-12-03 17:22:40

无法弄清楚为什么它不起作用了

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-12-03 17:22:40

解决方案1
0 已采纳 2020-12-03 17:22:40