HTML中按钮文字不显示，通常是因为标签的value属性被误拼为vaule，导致浏览器无法识别并渲染按钮文本。
html中按钮文字不显示，通常是因为``标签的`value`属性被误拼为`vaule`，导致浏览器无法识别并渲染按钮文本。
在您提供的代码中，问题出在这一行：
<input type="button" vaule="Add to list" onclick="addToList();"/>
vaule 是一个拼写错误——正确属性名应为 value（注意是 v-a-l-u-e，而非 v-a-u-l-e）。由于浏览器无法识别 vaule 这一无效属性，因此不会将 "Add to list" 作为按钮显示文本，最终只渲染出一个无文字的默认按钮（即您看到的“空绿色方块”）。
✅ 正确写法如下：
<input type="button" value="Add to list" onclick="addToList();"/>
此外，为提升代码健壮性与可维护性，建议补充以下优化点：
立即学习“前端免费学习笔记（深入）”；
-
添加 id 属性便于 JavaScript 精准操作（虽非必需，但推荐）：
<input type="button" id="add-btn" value="Add to list" onclick="addToList();"/>
-
避免内联事件处理（进阶建议）：将 JS 逻辑与 HTML 解耦，更符合现代开发实践：
<input type="button" id="add-btn" value="Add to list"/>
document.getElementById("add-btn").addEventListener("click", addToList); -
补充基础样式增强可读性（如文字颜色、内边距）：
input[type="button"] { background-color: #4CAF50; color: white; border: none; padding: 8px 16px; cursor: pointer; font-size: 14px; } input[type="button"]:hover { background-color: #45a049; }
⚠️ 注意事项：
- HTML 属性名区分大小写，但 value 全小写；拼写错误不会报错，但会导致功能失效。
- 浏览器对未知属性静默忽略，因此调试时需仔细核对属性名（可借助浏览器开发者工具的 Elements 面板检查元素实际渲染的属性）。
- 始终验证表单控件是否具备必要属性（如 的 type 和 value），这是前端开发的基础排查步骤。
修复后，按钮将正确显示“Add to list”文字，并正常触发添加任务逻辑。
