консоль выдает undefined, пока я пытаюсь создать элемент для чтения слушателем событий

Question

Я пытаюсь создать веб-приложение со списком задач и служит моей базой c тренировочной площадкой для javascript, но консоль выдает ошибки, и я могу понять. он говорит, что todo не определено, но я определил его через функцию как создаваемый div. Я просто хотел, чтобы каждый ввод в форме был добавлен в мой неупорядоченный список. Я просто использую примерное значение, а не реальный ввод. Я так запутался рН. спасибо за помощь.

//selectors

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

//event listener
todoButton.addEventListener('click', addTodo);
console.log(event);

//functions
function addTodo(event) {

  //creating the Todo Div
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");

  //creating the LI
  const newTodo = document.createElement('li');
  newTodo.innerText = "A new Task";
  newTodo.classList.add('todo-item');
  todoDiv.appendChild(newTodo);

  //checkmark button
  const completedButtton = document.createElement('button');
  completedButtton.innerHTML = '<i class="fa fa-check></i>';
  completedButtton.classList.add('complete-btn');
  todoDiv.appendChild(completedButtton);

  //trash button
  const trashButtton = document.createElement('button');
  trashButtton.innerHTML = '<i class="fa fa-trash></i>';
  trashButtton.classList.add('trash-btn');
  todoDiv.appendChild(trashButtton);

  //add to main ul class todo-list
  todoList.appendChild(todoDiv);
};

* {
  margin: 0em;
  padding: 0em;
  box-sizing: border-box;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

body {
  text-align: center;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  color: rgb(0, 0, 0);
}

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

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

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

form button:hover {
  color: #ffffff;
  background-color: #96e6a1;
}

<title>Worklist</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
<script src="https://use.fontawesome.com/3a734bc38d.js"></script>
<main>
  <h1>My Todo-List</h1>
  <p>Enjoy this handy website that you can use for free expecially for your todo list.</p>

  <form>
    <input type="text" class="todo-input" placeholder="Enter new task" />
    <button class="todo-button" type="submit">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                </buton>
            </form>

            <div class="todo-container">
                <ul class="todo-list"></ul>
            </div>

        </main>

Answer 1

Вот полностью рабочий to do list. В ваш код потребовалось множество изменений.

1. Вы не используете метод preventDefault, который означает вашу страницу reload каждый раз, когда вы добавляете новый to do item
2. Вы использовали правильные префиксы class .
3. Вам также не нужно иметь отдельную функцию для вызова по щелчку. Вы можете использовать тот же eventlistener для добавления элементов для выполнения.
4. Кроме того, когда добавлялись элементы для выполнения, вы не отображаете значки check и trash должным образом.
5. Кроме того, после успешного добавления элемента. его ideal, чтобы установить вход на null, к которому можно добавить еще item.

Демо:

//selectors

const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");

//event listener
todoButton.addEventListener('click', (event) => {
  event.preventDefault()

  //
  const todoInput = document.querySelector(".todo-input");

  //creating the Todo Div
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");

  //creating the LI
  const newTodo = document.createElement('li');
  newTodo.innerText = todoInput.value
  newTodo.classList.add('todo-item');
  todoDiv.appendChild(newTodo);

  //checkmark button
  const completedButtton = document.createElement('button');
  completedButtton.innerHTML = '<i class="fa fa-check></i>';
  completedButtton.classList.add('complete-btn');
  completedButtton.innerHTML = '<i class="fa fa-check" aria-hidden="true"></i>';
  todoDiv.appendChild(completedButtton);

  //trash button
  const trashButtton = document.createElement('button');
  trashButtton.innerHTML = '<i class="fa fa-trash" aria-hidden="true"></i>';
  trashButtton.classList.add('trash-btn');
  todoDiv.appendChild(trashButtton);

  //add to main ul class todo-list
  todoList.appendChild(todoDiv);

  //Clear div
  todoInput.value = ''

})

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Worklist</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
  <script src="https://use.fontawesome.com/3a734bc38d.js"></script>
  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">   -->
</head>

<body>
  <main>
    <h1>My Todo-List</h1>
    <p>Enjoy this handy website that you can use for free expecially for your todo list.</p>

    <form>
      <input type="text" class="todo-input" placeholder="Enter new task" />
      <button class="todo-button" type="submit">
          <i class="fa fa-plus" aria-hidden="true"></i>
          </button>
    </form>

    <div class="todo-container">
      <ul class="todo-list"></ul>
    </div>

  </main>
</body>