为什么这个 JavaScript 代码没有执行？

Question

Sorry, I'm a student and I can't figure out what is wrong with my code.抱歉，我是一名学生，我无法弄清楚我的代码有什么问题。 When I click the buttons absolutely nothing happens.当我单击按钮时，绝对没有任何反应。 I've tried isolating each function and still nothing happens.我已经尝试隔离每个 function，但仍然没有任何反应。 I've been looking it over for ages trying to find a missing tag or a missing bracket or parentheses or something but I'm not finding it.多年来我一直在寻找它，试图找到缺少的标签或缺少的括号或括号或其他东西，但我没有找到它。 It's meant to create a mini-blog simulation, You should be able to add an entry to the top of the list with the first function. and you should be able to delete an entry of your choice with the second function.它旨在创建一个迷你博客模拟，您应该能够使用第一个 function 将条目添加到列表顶部，并且您应该能够使用第二个功能删除您选择的条目。 Thank you for any help!感谢您的任何帮助！

<!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>

Answer 1

You have to replace你必须更换

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

with和

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

otherwise the form will be submitted and the page will reload.否则将提交表单并重新加载页面。 You can also use the submit function of the form but will you have to use preventDefault.您也可以使用表单的提交 function 但您必须使用 preventDefault。

Also to make the deleteEntry function works, you can't use document.getElementsByTagName("ol")[0];另外要使 deleteEntry function 起作用，您不能使用document.getElementsByTagName("ol")[0]; since you can't use .length on an element.因为你不能在元素上使用.length 。 Here's another way to do it:这是另一种方法：

        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();
            }
        }

为什么这个 JavaScript 代码没有执行？

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-11-15 15:35:04

为什么这个 JavaScript 代码没有执行？

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-11-15 15:35:04

解决方案1
3 已采纳 2020-11-15 15:35:04