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

问题是,当我手动运行诸如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>

最佳答案

您要将所有点击事件附加到同一按钮上,应为:

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>

关于javascript - JS DOM-添加/删除按钮不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47507669/

10-11 23:31
查看更多