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代替eventlistener，但是没有任何改变。它出什么问题了？老实说，我不明白为什么它不起作用。希望大家能帮忙！

Answer 1

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

更改

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

到

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

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

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

Answer 2

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

let buttons = document.getElementsByClassName('addbutton');
for (let b of buttons) {
  b.addEventListener('click', function() {
    newElement();
  });
}

除此之外，您还有多种错别字，其中使用了错误的函数名（JavaScript区分大小写，因此appendchild应该为appendChild），并在要使用的字符串处使用变量（'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>

JavaScript待办事项清单问题

2 个答案: