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

user_11524539 0
Viewed 6934

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.

codepen javascript
4 Answers

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...
}
user_116972450

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?

user_31998220

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".

user_88589820

It seems like this error (which is agreeably confusing - or enjoyably named) is brought up when a <form> is submitted in the sandbox. CodePen itself is a web application (built on rails I believe) with forms - and I'm not sure how that all plays out - but it probably has some scope to those - and can't just be having forms submitted to their server by its many many users.

Here is an example of an error: https://codepen.io/sheriffderek/pen/VwLQjZY

We've run across these a few times - but it has always been our fault - and when we've basically tried to submit a form - to a server we have no access to: (which can be unexpected - but makes sense)

enter image description here

and

enter image description here

are the messages we've seen. Does that mean 'poop' ? ; ) .... or...

and here is the documentation for preventing the default form submission https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

and how to use that in a Pen: https://codepen.io/sheriffderek/pen/abOqZoM

element.addEventListener('click', function(event) {
   event.preventDefault();
   // some instructions etc.
});

We should tell the people there - and maybe they can detect the type of submission error and direct people to information on why it occurs. : )

enter image description here

user_13994560
Related