Why isn't this JavaScript code executing?

user_13401713 0
Viewed 51

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. 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. 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>
blogs html javascript
1 Answers

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.

Also to make the deleteEntry function works, you can't use document.getElementsByTagName("ol")[0]; since you can't use .length on an element. 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();
            }
        }
user_83924240
Related