尝试分配事件处理程序时出现错误路径 /boomboom/v2/index.html 错误消息

Question

我正在 Codepen 上的 Javascript 中编写一个事件处理程序，它将采用表单输入并将其添加到无序列表中。尝试测试时，我收到一条 "bad path /boomboom/v2/index.html" 错误消息。我不确定这个错误是我的代码导致的还是 Codepen 的问题。谁能告诉我如何解决这个问题？

我不知道该尝试什么，因为我不知道这个错误是什么意思。

这是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>

这是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
    }

这是 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);
  }


})();

代码也可以在我的笔上查看 https://codepen.io/raquelocasio/pen/XwwKLZ

当我在表单域中输入一些文本并单击按钮时，显示错误。

预期的输出是能够将在表单域中输入的文本添加为新的列表项。任何帮助或指点将不胜感激。

Answer 1

我在 Codepen 中使用 <form> 标签时看到了类似的问题。我将 <form> 标签切换为 <div> 标签，错误消失了。

你能试试这个吗？

Answer 2

这是因为表单的默认行为是重新加载页面。在这种情况下，错误与代码笔有关。您需要将事件 preventDefault 方法添加到 addNewTodo 函数中。您需要为大多数表单提交事件执行此操作。

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

Answer 3

我的 codepen.io 笔上的表格也遇到了同样的问题，但是当我将按钮 type="submit" 更改为 type="button".[=10= 时问题得到解决]

Answer 4

当在沙箱中提交 <form> 时，似乎会出现此错误（令人愉快地混淆 - 或者愉快地命名）。 CodePen 本身是一个 Web 应用程序（我相信是基于 rails 构建的） 带有表单 - 我不确定这一切如何发挥作用 - 但它可能有一些范围- 不能只是让许多用户向他们的服务器提交表单。

这是一个错误示例：https://codepen.io/sheriffderek/pen/VwLQjZY

我们已经运行遇到过几次 - 但这一直是我们的错 - 当我们基本上尝试提交表单时 - 到我们无法访问的服务器：（可能出乎意料 - 但有道理）

和

是我们看到的消息。这是否意味着 'poop' ？ ; ) .... 或...

这是防止默认表单提交的文档https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

以及如何在 Pen 中使用它：https://codepen.io/sheriffderek/pen/abOqZoM

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

我们应该告诉那里的人 - 也许他们可以检测提交错误的类型并指导人们了解错误发生原因的信息。 :)

尝试分配事件处理程序时出现错误路径 /boomboom/v2/index.html 错误消息

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

javascript

codepen