Vanilla Javascript：待办事项列表在单击“提交”按钮后未创建，并且event.preventDefault不起作用

问题描述

我正在遵循使用Vanilla Javascript的Dev Ed的初学者工作清单指南。在YouTube评论中找不到我的问题的答案，所以我在这里问。

总而言之，我想要：

要获得看起来像第一张图片而不是第二张图片的结果，这就是我目前在Chrome，Firefox和Opera中打开的结果。
了解为什么event.preventDefault（）无法正常工作以及为什么单击+按钮时页面仍保持刷新状态。

在他的https://github.com/developedbyed/vanilla-todo中，该代码在jsfiddle.com中可完美运行，但在Chrome，Firefox和Opera中，当我在Visual Studio Code>使用实时打开中打开代码时，结果似乎并不相同服务器。

我从23:40开始被困在他的视频中-单击+按钮时，没有出现“嘿”行。 https://youtu.be/Ttf3CEsEwMQ?t=1420。当我单击+按钮时，页面将刷新。 event.preventDefault（）似乎不起作用。

以下是这段视频中的代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0- 
   2/css/all.min.css" integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" 
crossorigin="anonymous" />
<link rel="stylesheet" href="./style.css">
<title>Todo List</title>
</head>
<body>
 
<header>
    <h1>My Todo List</h1> 
</header>
<form>
    <input type="text" class="todo-input"> 
    <button class="todo-button" type="submit">
     <i class="fas fa-plus-square"></i>   
    </button>
</form>
<div class="todo-container">
    <ul class="todo-list"></ul>
</div>
    <script scr="./app.js"></script>
</body>
</html>

JavaScript：

//Selectors
const todoInput = document.querySelector(".todo-input");
const todobutton= document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");

//Event Listeners
todobutton.addEventListener("click",addTodo);
//Functions
event.preventDefault();
    //Prevent form from submitting
//Todo DIV
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//Create LI
const newTodo = document.createElement("li");
newTodo.innerText = "hey";
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
//CHECK MARK BUTTON
const completedButton = document.createElement("button");
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//CHECK trash BUTTON
const trashButton = document.createElement("button");
trashButton.innerHTML = '<i class="fas fa-trash"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//APPEND TO LIST
todoList.appendChild(todoDiv);
}

CSS：

    * { 
    margin: 0;
    padding: 0;
    Box-sizing: border-Box;
}

body { 
    background-image: linear-gradient(120deg,#e2c35d,#d88771);
    color: white;
    font-family: 'Poppins',sans-serif;
    min-height: 100vh;
}
header {
    font-size: 1.5rem;

}

header,form {
    min-height: 20vh;
    display: flex; 
    justify-content: center;
    align-items: center;

}

form input,form button {
    padding: 0.5rem;
    font-size: 2 rem;
    border: none;
    background: white;
}

form button {
    color: #d88771;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}
form button:hover {
    background: white;
    color: #d88771;
    
}

解决方法

其中包含<button type="submit">的表单将在您单击该按钮时提交。这意味着您必须取消<form>而不是<button>的默认行为。我建议使用此方法，因为它使您可以控制表单的行为，而不仅仅是按钮的行为。它还允许您使用键盘上的 return 键提交表单。

在JavaScript中选择表单元素，如果必须使其更易于选择，请为其指定一个ID，然后在所选表单上监听submit事件。

现在，您要发生的是，每次单击提交按钮时都会调用addTodo函数。这就是addEventListener部分的目的。在这里，您可以监视事件，例如本例中的提交，并在发生任何事件时对其进行操作。因此，请监听表单上的Submit事件，并在触发该事件时调用addTodo。

如果您在addEventListener函数中使用addTodo 内部，那么每次调用addTodo时都会添加一个新的侦听器，这很糟糕！ / p>

查看下面的示例以了解其工作原理。

//Selectors - Also select the form.
const todoForm = document.querySelector("#todo-form");
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");

// Listen for the submit event and call addTodo when a submit happens.
todoForm.addEventListener("submit",addTodo);

function addTodo(event) {
  //Functions
  event.preventDefault();
  //Prevent form from submitting
  //Todo DIV
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");
  //Create LI
  const newTodo = document.createElement("li");
  newTodo.innerText = todoInput.value;
  newTodo.classList.add("todo-item");
  todoDiv.appendChild(newTodo);
  //CHECK MARK BUTTON
  const completedButton = document.createElement("button");
  completedButton.innerHTML = '<i class="fas fa-check"></i>';
  completedButton.classList.add("complete-btn");
  todoDiv.appendChild(completedButton);
  //CHECK trash BUTTON
  const trashButton = document.createElement("button");
  trashButton.innerHTML = '<i class="fas fa-trash"></i>';
  trashButton.classList.add("trash-btn");
  todoDiv.appendChild(trashButton);
  //APPEND TO LIST
  todoList.appendChild(todoDiv);
}

<header>
  <h1>My Todo List</h1>
</header>
<form id="todo-form">
  <input type="text" class="todo-input">
  <button class="todo-button" type="submit">Add</button>
</form>
<div class="todo-container">
  <ul class="todo-list"></ul>
</div>

创建一个addTodo函数并

todoButton.addEventListener("click",(e) => {
    e.preventDefault(); //event.preventDefault()
    addTodo();
});

html javascript jsfiddle submit