如何使用DOM获取输入框文本值 点击提交按钮时添加到待办列表

• 表单提交默认会触发页面刷新，需要阻止默认提交行为
• 原代码的点击事件监听嵌套在addToDo函数中，但该函数从未被调用，导致监听事件根本未绑定
• 错误将DOM元素form当作数组调用push方法，会直接抛出JS异常
• 缺少创建新li元素、给li赋值文本、将li插入到文档中的核心逻辑
• 现有li元素未包裹在ul/ol标签中，不符合HTML语义规范

HTML部分 #

<h1>TO-DO List</h1>
<form id="form">
  <input type="text" placeholder="Write your todo" id="toDoText">
  <input type="submit" id="submitButton" value="添加待办">
</form>
<!-- 新增ul容器包裹所有待办项 -->
<ul id="todoList">
  <li class="todo">Example 1</li>
  <li class="todo">Example 2</li>
</ul>

JS部分 #

const todoList = document.getElementById('todoList');
const toDoInput = document.getElementById('toDoText');
const form = document.getElementById('form');

// 绑定表单提交事件，覆盖按钮点击场景兼容性更好
form.addEventListener('submit', function(e) {
  // 阻止表单默认刷新页面行为
  e.preventDefault();
  // 获取输入框内容，去除首尾空格
  const inputValue = toDoInput.value.trim();
  // 空内容不提交
  if (!inputValue) return;

  // 创建新的待办li元素
  const newTodo = document.createElement('li');
  newTodo.className = 'todo';
  newTodo.textContent = inputValue;
  // 将新待办插入到列表末尾
  todoList.appendChild(newTodo);
  // 清空输入框方便下次输入
  toDoInput.value = '';
})

• 输入内容后点击提交按钮或者按回车都可以新增待办
• 空内容不会被添加到列表中
• 新增待办后自动清空输入框

内容的提问来源于stack exchange，提问作者major_665