脚本待办事项列表问题

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

这里有很多错误。但主要问题是返回一个集合而不是单个元素。因此，您需要遍历该集合才能与元素进行交互：getElementsByClassName

let buttons = document.getElementsByClassName('addbutton');

for (let b of buttons) {

  b.addEventListener('click', function() {

    newElement();

  });

}

除此之外，您还有各种拼写错误，其中使用了不正确的函数名称（JavaScript区分大小写，因此应该如此），并且在您打算使用变量（而不是，而不是）的地方使用字符串。appendchildappendChild'li'li'lichild'lichild

我怀疑你的意思是这样写的：

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 = "";

}

let buttons = document.getElementsByClassName('addbutton');

for (let b of buttons) {

  b.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>

Answer 2

document.getElementsByClassName返回一个集合，您希望访问集合中的第一个元素

改变

document.getElementsByClassName('addbutton').addEventListener(...)

自

document.getElementsByClassName('addbutton')[0].addEventListener(...)

或者您可以使用返回第一个匹配元素的元素querySelector

document.querySelector('.addbutton').addEventListener(...)