javascript - JS DOM - 添加/删除按钮不起作用

Question

编写允许用户输入添加到有序列表中的文本的 Javascript 代码。创建两个按钮(添加项目和删除最后一个)，允许用户在按下时添加项目或删除最后添加的项目。应该有一个可选的“删除#”按钮，然后是文本输入。这将删除用户输入的项目#。此外，如果用户点击“输入要添加的项目”下的文本输入，您应该删除可能已经存在的任何现有文本值。

问题是，当我手动运行诸如 add() 之类的函数时，我的代码工作正常；在控制台上。但是当我输入我的 remove(); js 文件中的函数添加按钮不起作用，除非我在控制台中手动调用它。删除按钮有同样的问题。

window.onload = function() {
  var button = document.getElementById("add");
  var button1 = document.getElementById("delete");
  var button2 = document.getElementById("deleteItem");
  var input = document.getElementById("input");
  button.onclick = add;
  button.onclick = remove;
  button.onclick = specific;
  input.onclick = clearText;
}

function clearText() {
  this.value = "";
}

function add() {
  var input = document.getElementById("input");
  var output = document.getElementById("list");
  if (input.value != "") {
    var li = document.createElement("li");
    li.innerHTML = input.value;
    output.appendChild(li);
  }
}


function remove() {
  var list = document.getElementById("list");
  var allLi = list.getElementsByTagName("li")
  if (allLi.length > 0) {
    list.removeChild(allLi[allLi.length - 1]);
  }
}

ol {
  width: 200px;
  height: 200px;
  background-color: silver;
  border: 1px solid black;
  overflow: auto;
}

<h1> Todo List++ </h1>
<p> Enter item to add: <br> <input id="input" type="text"> </p>
<button id="add"> Add item </button>
<button id="delete"> Delete </button>
<button id="deleteItem"> DeleteItem# </button>
<input type="text" id="item" style="width:30px;"> <br>
<!-- You need to add in the buttons -->
<!-- it is OK if your HTML looks slightly different than the one in the PDF -->
<!-- as long as your code can perform the same function -->
<ol id="list"> </ol>

Answer 1

您将所有点击事件附加到同一个按钮，应该是:

window.onload = function() {
    var button = document.getElementById("add");
    var button1 = document.getElementById("delete");
    var button2 = document.getElementById("deleteItem");
    var input = document.getElementById("input");

    button.onclick = add;
    button1.onclick = remove;
    button2.onclick = specific;
    input.onclick = clearText;
}

片段:

window.onload = function() {
  var button = document.getElementById("add");
  var button1 = document.getElementById("delete");
  var button2 = document.getElementById("deleteItem");
  var input = document.getElementById("input");
  button.onclick = add;
  button1.onclick = remove;
  button2.onclick = specific;
  input.onclick = clearText;
}

function clearText() {
  this.value = "";
}

function specific() {
  console.log('specific');
}

function add() {
  var input = document.getElementById("input");
  var output = document.getElementById("list");
  if (input.value != "") {
    var li = document.createElement("li");
    li.innerHTML = input.value;
    output.appendChild(li);
  }
}


function remove() {
  var list = document.getElementById("list");
  var allLi = list.getElementsByTagName("li")
  if (allLi.length > 0) {
    list.removeChild(allLi[allLi.length - 1]);
  }
}

{
  width: 200px;
  height: 200px;
  background-color: silver;
  border: 1px solid black;
  overflow: auto;
}

<h1> Todo List++ </h1>
<p> Enter item to add: <br> <input id="input" type="text"> </p>
<button id="add"> Add item </button>
<button id="delete"> Delete </button>
<button id="deleteItem"> DeleteItem# </button>
<input type="text" id="item" style="width:30px;"> <br>
<!-- You need to add in the buttons -->
<!-- it is OK if your HTML looks slightly different than the one in the PDF -->
<!-- as long as your code can perform the same function -->
<ol id="list"> </ol>