脚本待办事项列表问题

Question

自从我刚刚开始学习JavaScript以来，就试图为一个项目制作一个待办事项列表。下面是代码。

function newElement() {

  var inputval = document.getElementById('inputnewlist').value;

  var li = document.createElement('li');

  var lichild = document.createTextNode('inputval');

  li.appendchild('lichild');

  if (inputval === '') {

    alert('you must put something in the textbox!');

  } else {

    document.getElementById('mylist').appendchild('li');

  }

  document.getElementById('inputnewlist').value = "";

}

document.getElementsByClassName('addbutton').addEventListener('click', function() {

  newElement();

});

<div id="formcontainer">

  <h2 class="title"> To Do List </h2>

  <label for="inputnewlist"> Add To List</label>

  <input type="text" name="inputnewlist" id="inputnewlist" placeholder="Add thing to do..">

  <button class="addbutton">Add</button>

</div>

<ul id="mylist">

  <li> hi hehe <span class="exit"> x </span></li>

</ul>

问题是该按钮根本不执行任何操作。我已经尝试过使用onclick而不是事件列表，但没有任何变化。这是怎么回事？老实说，我不明白为什么它不起作用。希望你们能帮上忙！

Answer 1

这里有很多错误。但主要问题是返回一个集合而不是单个元素。因此，您需要遍历该集合才能与元素进行交互：getElementsByClassNamelet buttons = document.getElementsByClassName('addbutton');for (let b of buttons) {&nbsp; b.addEventListener('click', function() {&nbsp; &nbsp; newElement();&nbsp; });}除此之外，您还有各种拼写错误，其中使用了不正确的函数名称（JavaScript区分大小写，因此应该如此），并且在您打算使用变量（而不是，而不是）的地方使用字符串。appendchildappendChild'li'li'lichild'lichild我怀疑你的意思是这样写的：function newElement() {&nbsp; var inputval = document.getElementById('inputnewlist').value;&nbsp; var li = document.createElement('li');&nbsp; var lichild = document.createTextNode(inputval);&nbsp; li.appendChild(lichild);&nbsp; if (inputval === '') {&nbsp; &nbsp; alert('you must put something in the textbox!');&nbsp; } else {&nbsp; &nbsp; document.getElementById('mylist').appendChild(li);&nbsp; }&nbsp; document.getElementById('inputnewlist').value = "";}let buttons = document.getElementsByClassName('addbutton');for (let b of buttons) {&nbsp; b.addEventListener('click', function() {&nbsp; &nbsp; &nbsp;newElement();&nbsp; });}<div id="formcontainer">&nbsp; <h2 class="title"> To Do List </h2>&nbsp; <label for="inputnewlist"> Add To List</label>&nbsp; <input type="text" name="inputnewlist" id="inputnewlist" placeholder="Add thing to do..">&nbsp; <button class="addbutton">Add</button></div><ul id="mylist">&nbsp; <li> hi hehe <span class="exit"> x </span></li></ul>

Answer 2

document.getElementsByClassName返回一个集合，您希望访问集合中的第一个元素改变document.getElementsByClassName('addbutton').addEventListener(...)自document.getElementsByClassName('addbutton')[0].addEventListener(...)或者您可以使用返回第一个匹配元素的元素querySelectordocument.querySelector('.addbutton').addEventListener(...)