为什么这段 JavaScript 代码没有执行？答案

【问题标题】：Why isn't this JavaScript code executing?为什么这段 JavaScript 代码没有执行？
【发布时间】：2020-11-15 15:24:57
【问题描述】：

抱歉，我是一名学生，我无法弄清楚我的代码有什么问题！当我单击按钮时，绝对没有任何反应。我已经尝试隔离每个功能，但仍然没有任何反应。多年来，我一直在寻找它，试图找到丢失的标签或丢失的括号或括号或其他东西，但我没有找到它。它旨在创建一个迷你博客模拟。您应该能够使用第一个功能将条目添加到列表顶部，并且您应该能够使用第二个功能删除您选择的条目。感谢您的帮助！

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Chapter 5 Activity</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>Awesome NBA Blog!  Each day, a sentence about the feats of a different legend!</h1>
    <ol id="playerEntries">
      <li>Michael Jordan: 6 Championship rings in 6 NBA Finals appearances.</li>
      <li>Bill Russell: 11 time champion in a 13 year career, including one as a player/head coach.</li>
      <li>Kobe Bryant: 5 Championships, 18-time All-Star.</li>
      <li>Lebron James: Won a Championship and was the Finals MVP with 3 different teams.</li>  
    </ol>
    <form action="">
      Add a new entry:
      <input type="text" name="newEntry" id="newEntrySpot" size="80">
      <input type="submit" value="Submit" onclick="addEntry()"><br>
      Delete an entry(which entry would you like to delete?)
      <input type="number" name="entryNum" id="numToDelete">
      <input type="button" value="Delete" onclick="deleteEntry()"><br>
    </form> 
    <script type="text/javascript">
      function addEntry() {
        var newEntry = document.getElementById("newEntrySpot").value;
        var newestEntry = document.createElement("li");
        newestEntry.innerHTML = newEntry;
        var blogList = document.getElementsByTagName("ol")[0];
        var topEntry = document.querySelectorAll("#playerEntries li")[0];
        blogList.insertBefore(newestEntry, topEntry);
        }
        
      function deleteEntry() {
        var num2Delete = document.getElementsByName("entryNum")[0].value;
        var blogList = document.getElementsByTagName("ol")[0];
        var howManyEntries = blogList.length;
        if (howManyEntries >= 1) {
          var postToDelete = blogList[num2Delete - 1];
          var deletedPost = blogList.removeChild(postToDelete);
          }
        }
    </script>
  </body>
</html>

【问题讨论】：

控制台是否出现任何错误？

标签： javascript html blogs

【解决方案1】：

你必须替换

 <input type="submit" value="Submit" onclick="addEntry()"><br>

与

 <input type="button" value="Submit" onclick="addEntry()"><br>

否则表单将被提交并且页面将重新加载。您也可以使用表单的提交功能，但您必须使用 preventDefault。

同样为了使 deleteEntry 函数起作用，你不能使用document.getElementsByTagName("ol")[0];，因为你不能在一个元素上使用.length。这是另一种方法：

        function deleteEntry() {
            var num2Delete = document.getElementsByName("entryNum")[0].value;
            var blogList = document.querySelectorAll("ol > li");
            var howManyEntries = blogList.length;

            if (howManyEntries >= 1) {
                var postToDelete = blogList[num2Delete - 1];
                postToDelete.remove();
            }
        }

【讨论】：