如何修复按钮文字不显示的问题：纠正HTML属性拼写错误-html教程-PHP中文网

如何修复按钮文字不显示的问题：纠正HTML属性拼写错误

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 精准操作（虽非必需，但推荐）：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载
```
<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;
}

⚠️ 注意事项：