按钮标题不显示求助：待办清单添加按钮仅为空白绿色方块

你的问题出在按钮的属性拼写错误上——你把按钮的value属性写成了vaule，浏览器无法识别这个错误属性，因此按钮只加载了你设置的绿色背景，却没有显示预期的文字。

修复方法非常简单，把拼写错误的vaule改成正确的value即可：

修正后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>To-Do list</title>
        <style>
            input[type="button"] {
                background-color: green;
                color: white; /* 添加白色文字，和绿色背景形成对比更易读 */
                padding: 4px 8px; /* 给按钮加内边距，避免过于紧凑 */
                border: none;
                cursor: pointer;
            }
        </style>
        <script>
            function addToList() {
                var newItem = document.createElement("div");
                newItem.innerHTML = document.getElementById("box").value;
                document.getElementById("list").appendChild(newItem);
                // 新增：添加完待办项后清空输入框，提升使用体验
                document.getElementById("box").value = "";
            }
        </script>
    </head>
    <body>    
        <p>To-do list</p>
        <br/>
        <input type="text" id="box" value="enter something">
        <br/>
        <input type="button" value="Add to list" onclick="addToList();"/>
        <br/>
        <div id="list"></div>
    </body>
</html>

额外优化建议 #

• 给按钮添加color: white，解决绿色背景下文字可读性差的问题
• 增加padding属性，让按钮尺寸更合理，视觉上更舒适
• 添加清空输入框的逻辑，完成待办项添加后自动清空输入框，减少用户操作步骤

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