在构建待办事项（to-do list）等交互式网页应用时，用户提交任务后自动清空输入框是基础且必要的体验优化；本文将手把手教你通过原生 javascript 正确获取并重置 input 元素的 value 值。
要实现在点击“添加”按钮（或回车提交）后自动清空输入框，关键在于：必须操作 DOM 元素本身，而非仅读取其初始值。常见错误（如提问者所遇）是这样写的：
let user_input = document.querySelector(".myinput").value; // ❌ 错误：获取的是字符串副本
// ……后续 user_input = ""; 并不会影响页面上的 input 元素！这行代码只是把输入框当时的文本值复制给了变量 user_input，之后对这个变量赋空字符串，完全不影响 DOM 元素——所以输入框内容“纹丝不动”。
✅ 正确做法是：先通过唯一标识（推荐使用 id）精准获取 input 元素对象，再修改其 .value 属性：
<input type="text" id="myinput" placeholder="Add a new task..."> <button onclick="addTask()">Add</button>
function addTask() {
const inputEl = document.getElementById("myinput"); // ✅ 获取元素对象（非值）
const inputValue = inputEl.value.trim(); // 获取值并去除首尾空格
if (inputValue !== "") {
// ✅ 此处插入你的添加逻辑（如创建 li、追加到列表等）
// appendToList(inputValue);
// ✅ 提交后立即清空输入框
inputEl.value = ""; // 直接修改 DOM 元素的 value 属性
}
}? 重要注意事项：
- 使用 id 而非 class 查找元素更高效、更可靠（getElementById 比 querySelector 快，且确保唯一性）；
- 清空操作 inputEl.value = "" 必须放在任务添加逻辑之后，否则可能因异步或 DOM 更新顺序导致意外行为；
- 建议配合 .trim() 过滤纯空格输入，避免添加无意义空白任务；
- 若使用表单 <form> 提交，请为 submit 事件添加 event.preventDefault()，防止页面刷新导致状态丢失。
掌握这一模式，不仅适用于 To-Do List，所有带输入+提交场景（如留言框、搜索栏、登录表单）均可复用——清空输入框，是专业前端交互体验的起点。
