将getElementById更改为getElementsByClassName [未定义]

Question

我在使用getElementsByClassName时遇到了问题。单击add按钮时，它将以名称undefined而不是值"hello"出现在列表中。我做错了什么？

代码：

​

function addItem(){
  var ul = document.getElementById("dynamic-list");
  var candidate = document.getElementsByClassName("candidate");
  var li = document.createElement("li");
  li.setAttribute('class',candidate.value);
  li.appendChild(document.createTextNode(candidate.value));
  ul.appendChild(li);
}

function removeItem(){
  var ul = document.getElementById("dynamic-list");
  var candidate = document.getElementsByClassName("candidate");
  var item = document.getElementsByClassName(candidate.value);
  ul.removeChild(item);
}

<ul id="dynamic-list"></ul>
<button type="submit" class="item" value="hello" onclick="addItem()">ADD</button>
<button onclick="removeItem()">remove item</button>

​

Answer 1

问题是您试图获取一个不存在的DOM元素candidate的值。可能的解决方案可能是向按钮add添加一个id属性，并在函数中获取此元素：

​

 function addItem() {
      var ul = document.getElementById("dynamic-list");
      var candidate = document.getElementById("item");
      var li = document.createElement("li");
      li.setAttribute('class', candidate.value);
      li.appendChild(document.createTextNode(candidate.value));
      ul.appendChild(li);
    }

    <ul id="dynamic-list"></ul>
    <button type="submit" class="item" id="item" value="hello" onclick="addItem()">ADD</button>
    <button onclick="removeItem()">remove item</button>

​

Answer 2

代码的主要问题是类名candidate在HTML中不存在。如果您的目标是在这个类中引用"ADD“按钮，那么您需要在您的HTML中将它的类更改为candidate，或者将JS更改为引用它的实际类item。

此外，顾名思义，getElementsByClassName返回多个元素的NodeList，而不是单个元素。这意味着您需要从该列表中选择一个要操作的元素；相反，您的代码将此方法视为只返回一个要直接操作的元素(即，Node而不是NodeList)。对于您的addItem函数来说，这个更改是微不足道的；item类只有一个元素，所以只需选择NodeList的第一个元素(即元素0)。对于removeItem函数，假设您想首先删除最近添加的节点(LIFO样式)，则需要从DOM中删除NodeList中的最后一个元素(如果存在)。有关所有这些更改和一些解释性注释，请参阅下面的更新代码片段：

​

function addItem(){
  var ul = document.getElementById("dynamic-list");
  // We know that the "candidate" is always the first—and only—element with the class name "item"
  var candidate = document.getElementsByClassName("item")[0];
  var li = document.createElement("li");
  li.setAttribute('class',candidate.value);
  li.appendChild(document.createTextNode(candidate.value));
  ul.appendChild(li);
}

function removeItem(){
  var ul = document.getElementById("dynamic-list");
  // We know that the "candidate" is always the first—and only—element with the class name "item"
  var candidate = document.getElementsByClassName("item")[0];
  // The "items" variable is introduced to hold the list of all added ".hello" elements, the last of which we will remove
  var items = document.getElementsByClassName(candidate.value);
  // Safety check: it's possible that there are no more ".hello" elements remaining, in which case there's nothing to remove
  if (items.length > 0) {
    // Access the last element of the NodeList and remove it from the DOM
    var item = items[items.length - 1];
    ul.removeChild(item);
  }
}

<ul id="dynamic-list"></ul>
<button type="submit" class="item" value="hello" onclick="addItem()">ADD</button>
<button onclick="removeItem()">remove item</button>

​