点击提交按钮时根据答案对错修改表单背景色的技术求助

API 探路者

2026-8-17

问题修正方案

你当前的代码有几个关键问题，调整后就能实现需求：

问题点梳理：

函数名拼写不一致：JS里写的是chagecolor，但HTML按钮调用的是changecolor，导致点击无响应
直接拿DOM元素和字符串比较：你现在是把document.getElementById("answer")这个元素对象和"BURJ KHALIFA"比，应该取输入框的value属性值来判断
修改的是输入框背景而非表单背景：你的需求是改表单背景色，但代码里给输入框加了背景色
提交按钮会触发表单默认提交动作，导致页面刷新，颜色刚加上就消失

修正后的完整代码：

HTML 部分

<hr>
What's the tallest building in the world in 2022? <!--BURJ KHALIFA-->
<form id="quizForm">
    <input style="text-transform: uppercase;" type="text" id="answer" name="answer">
    <input onclick="changecolor(event)" id="turnon" type="submit" value="Check Answer">
</form>

JavaScript 部分

function changecolor(event) {
    // 阻止表单默认提交刷新页面
    event.preventDefault();
    // 获取输入框的值，转成大写（确保输入大小写不影响判断）
    const inputValue = document.getElementById("answer").value.toUpperCase();
    // 获取表单元素
    const quizForm = document.getElementById("quizForm");
    
    if (inputValue === "BURJ KHALIFA") {
        // 答案正确，表单设为绿色背景
        quizForm.style.backgroundColor = '#03C13D';
    } else {
        // 答案错误，表单设为红色背景
        quizForm.style.backgroundColor = '#F40320';
    }
}