时间戳

首页 > 解决方案 > addEventListener 使用 Javascript 创建待办事项列表的问题

javascript - addEventListener 使用 Javascript 创建待办事项列表的问题

问题描述

我的项目需要以下内容：

在本次作业中，您将结合您对 DOM 访问和事件的了解来构建一个待办事项应用程序！作为用户，您应该能够：

添加新的待办事项（通过提交表单）

将待办事项标记为已完成（划掉待办事项的文本）

删除待办事项

我的代码遇到的唯一问题是完整按钮。单击时，它应该只是划掉文本（确实如此），但是完成和删除按钮会消失。我可以让完成的按钮消失，但是删除按钮应该保留。为什么这些按钮会消失？我的 removeBtn.addEventListener 编码是否错误？我必须在这个 addEventListener 中创建一个新的 removebutton 吗？

const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const newToDo = document.createElement('li');
  const newToDoName = document.createElement('span');
  const removeBtn = document.createElement('button');
  const completeBtn = document.createElement('button');
  newToDoName.innerText = input.value;
  removeBtn.innerText = 'Click to Remove';
  completeBtn.innerText = 'Click if Completed';
  newToDo.appendChild(newToDoName);
  newToDo.appendChild(completeBtn);
  newToDo.appendChild(removeBtn);
  input.value = '';
  todolist.appendChild(newToDo);

  completeBtn.addEventListener("click", function(e) {
    newToDo.innerHTML = newToDoName.innerText.strike();
  })

  removeBtn.addEventListener("click", function(e) {
    e.target.parentElement.remove();
  })
})
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body>
  <h1>To Do List:</h1>
  <ul id="todolist">
  </ul>
  <form action="" id="addToDo" name="addToDo">
    <input type="text" id="theToDo" name="addToDo" placeholder="Add to the list here">
    <button type="submit">Submit</button>
  </form>
  <script src=TodoList.js></script>
</body>

</html>

标签： javascripthtml

解决方案

const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const newToDo = document.createElement('li');
  const newToDoName = document.createElement('span');
  const removeBtn = document.createElement('button');
  const completeBtn = document.createElement('button');
  newToDoName.innerText = input.value;
  removeBtn.innerText = 'Click to Remove';
  completeBtn.innerText = 'Click if Completed';
  newToDo.appendChild(newToDoName);
  newToDo.appendChild(completeBtn);
  newToDo.appendChild(removeBtn);
  input.value = '';
  todolist.appendChild(newToDo);

  completeBtn.addEventListener("click", function(e) {
    newToDo.innerHTML = newToDoName.innerText.strike();
    newToDo.appendChild(removeBtn);
  })

  removeBtn.addEventListener("click", function(e) {
    e.target.parentElement.remove();
  })
})
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body>
  <h1>To Do List:</h1>
  <ul id="todolist">
  </ul>
  <form action="" id="addToDo" name="addToDo">
    <input type="text" id="theToDo" name="addToDo" placeholder="Add to the list here">
    <button type="submit">Submit</button>
  </form>
  <script src=TodoList.js></script>
</body>

</html>

innerHTML删除标签之间的所有内容。

推荐阅读