Bad path /boomboom/v2/index.html error message when trying to assign event handlers

Question

I'm writing an event handler in Javascript on Codepen that will take a form input and add it to an unordered list. When trying to test, I get a "bad path /boomboom/v2/index.html" error message. I'm not sure if this error is a result of my code or an issue with Codepen. Can anyone point me to how to fix this?

I don't know what to try because I have not idea what this error means.

Here's the HTML:

<div class="card">
<div class="card-body">
    <h3 class="card-title">Today's To Do List</h3>
    <form id="todo-form">Week 5: To Do List
        <div class="form-group">
            <input type="text" class="form-control" id="todo-Week 5: To Do Listinput" placeholder="What else do you need to do?">
        </div>
        <div class="form-group">
            <input type="submit" id="todo-btn" class="btn btn-secondary btn-block" value="Add Item To List">
        </div>
    </form>
</div>
<ul class="list-group list-group-flush" id="todo-ul">
    <li class="list-group-item">Pick up groceries
            <i class="fas fa-trash-alt"></i>
    </li>
    <li class="list-group-item">Finish essay
        <i class="fas fa-trash-alt"></i>
    </li>
    <li class="list-group-item">Soccer @ 5:00

        <i class="fas fa-trash-alt"></i>
</ul>

Here's the CSS:

        body
    {
        background-color: #34495e;
        font-family: 'Lato', sans-serif;
    }

    button {
        margin: 0 auto;
        float: right;
    }

    .centered {
        margin: 0 auto;
        width: 80%
    }

    .card {
        margin: 50px auto;
        width: 18rem;
    }
    i{
        float:right;
        padding-top:5px
    }

Here's the Javascript:

    (function(){
  //add event handler to form button
  formButton = document.querySelector("#todo-btn");
  formButton.onclick = addNewTodo;

  function addNewTodo() {

  //get value of form field
  newTask = document.getElementById("todo-Week 5: To Do Listinput").value;
  //console.log(newTask);
  //create new ul list item element
  const newItem = document.createElement('li');
  const newItemContent = document.createTextNode(newTask);

  //add new li element item to ul
  newItem.appendChild(newItemContent);
  document.getElementById("todo-ul").appendChild(newItem);
  }


})();

Code can also be viewed on my pen at https://codepen.io/raquelocasio/pen/XwwKLZ

When I enter some text into the form field and click the button, the error displays.

The expected output is to be able to add the text entered in the form field as a new list item. Any help or pointers would be greatly appreciated.

Answer 1

it's due to the forms default behaviour which is to reload the page. In this case the error is related to codepen. You need to add the event preventDefault method to your addNewTodo function. You'll need to do this for most form submit events.

function addNewTodo(event) {
  event.preventDefault()
  // Rest of your add todo code here...
}

Answer 2

I saw a similar issue when I used <form> tags in Codepen. I switched the <form> tag to a <div> tag and the error went away.

Can you try this?

Answer 3

I got the same problem with a form on my codepen.io pen, but it got fixed when i changed button type="submit" to type="button".