JavaScript中如何获取input内容？TODO列表开发问题求助

问题分析 #

你当前代码存在几个关键问题：

• HTML中按钮标签拼写错误：<buton>应为<button>，否则点击事件可能无法正常触发
• 获取输入框内容的方式错误：input元素的输入值存在value属性中，而非innerHTML；且document.getElementsByClassName返回的是元素集合，不能直接访问innerHTML
• 已定义的input变量未被利用，造成冗余

修正后的代码 #

HTML（修正按钮标签）

<div class="card">
  <div class="todoheader">TODO List</div>
  <div class="todotext"></div>
  <ul class="list"></ul>
  <div class="addtodo">
    <button class="add" type="button"> + </button>
    <input type="text" class="input" placeholder="add todo" />
  </div>
</div>

JavaScript（完善取值和添加逻辑）

let btn = document.querySelector('.add');
const input = document.querySelector('.input'); // 直接按类名获取更精准
const todoList = document.querySelector('.list');

btn.addEventListener('click', function() {
  // 获取输入框的值，同时去除首尾空格
  const txt = input.value.trim();
  
  // 空内容不添加
  if (!txt) return;
  
  // 创建新的列表项元素
  const todoItem = document.createElement('li');
  todoItem.textContent = txt;
  
  // 将新元素追加到列表中
  todoList.appendChild(todoItem);
  
  // 清空输入框
  input.value = '';
});

关键说明 #

• 用input.value获取输入框的实际内容，这是表单输入元素的标准取值方式
• 添加trim()过滤首尾空格，避免添加空的TODO项
• 创建<li>元素并设置textContent（比innerHTML更安全，防止XSS风险），然后追加到目标<ul>中
• 完成添加后清空输入框，提升用户体验

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