我的JavaScript沒有在CodePen中運行，我也不知道這是否是我的代碼中的錯誤

Question

我正在Codepen中練習一些JS，但是我的代碼似乎無法正常工作，我也不知道為什么。 我已經嘗試過谷歌搜索並在堆棧溢出中搜索問題數據庫。 這是我正在使用的所有代碼

  var newItemCounter = 1; var unList = document.getElementById("list"); var button = document.getElementById("button"); var headline = document.getElementById("headline"); var listItems = document.getElementByID("list").getElementsByTagName("li"); list.addEventListener("click", activateItem); function activateItem(e) { if (e.target.nodeName == "LI") { headline.innerHTML = e.target.innerHTML; for (i = 0; i < e.target.parentNode.children.length; i++) { e.target.parentNode.children[i].classList.remove("active"); } e.target.classList.add("active"); } } button.addEventListener("click", createNewItem); function createNewItem() { list.innerHTML += "<li>Something new " + newItemCounter + "</li>"; newItemCounter++ } 

  .active{ background-color:blue; } 

  <h1 id="headline">Click a list item to replace this text.</h1> <button type="button" id="button">Add new item</button> <ul id="list"> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> <li>Fifth item</li> </ul> 

Answer 1

更改var listItems = ...

document.getElementByID("list")

至

document.getElementById("list")

 var newItemCounter = 1; var unList = document.getElementById("list"); var button = document.getElementById("button"); var headline = document.getElementById("headline"); var listItems = document.getElementById("list").getElementsByTagName("li"); list.addEventListener("click", activateItem); function activateItem(e) { if (e.target.nodeName == "LI") { headline.innerHTML = e.target.innerHTML; for (i = 0; i < e.target.parentNode.children.length; i++) { e.target.parentNode.children[i].classList.remove("active"); } e.target.classList.add("active"); } } button.addEventListener("click", createNewItem); function createNewItem() { list.innerHTML += "<li>Something new " + newItemCounter + "</li>"; newItemCounter++ } 

 .active{ background-color:blue; } 

 <h1 id="headline">Click a list item to replace this text.</h1> <button type="button" id="button">Add new item</button> <ul id="list"> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> <li>Fifth item</li> </ul> 

Answer 2

在第5行上，將getElementByID更改為getElementById，它將正常工作。 “ Id”不應使用大寫字母