为什么.setAttribute（）和.removeAttribute方法在我的javascript代码中不起作用？

Question

我创建了一个小卡片游戏，如下所示：

用户在文本框中输入正确答案后，单词“正确！”应该以粗体显示为绿色，然后很快就会删除CSS属性。这是输入区域的HTML：

<div>
    <input type="text" id="answer" style="width: 80%; height: 30px;" placeholder="Enter your answer..." onkeyup="checkAnswer(this,event);" autofocus><br>
</div>  

这是应该执行上述操作的相应javascript：

function checkAnswer(input, event){
    if(event.keyCode == 13){
        var answer = document.getElementById("answer").value.toLowerCase();
        var answer_style = document.getElementById("answer");
        for(var i = 0; i<qs.length; i++){
            if(answer == qs[cardIndex]["a"].toLowerCase()){
                **input.setAttribute("style", "color:green; font-weight:bold;");**
                input.value = "Correct!";
                setTimeout(function(){input.value="";},1000);
                **input.removeAttribute("style");**
            }else{
                input.value = "Incorrect!";
                setTimeout(function(){input.value="";},1000)
            }
        }
        if(input.value == "Correct!"){
            nextCard();
        }
    }
}

除了已在代码段中加注星标的setAttribute和removeAttribute方法之外，checkAnswer函数中的所有内容都有效。我已经尝试在for循环之后放置removeAttribute方法，但这不起作用。如果我不包含removeAttribute方法，则setAttribute方法可以工作，但我不希望文本保持绿色。

如果有人能帮我解决这个问题会很棒！

如果您需要更多信息来理解这个问题，请不要犹豫！

谢谢！

Answer 1

添加后，您会立即删除style属性。删除需要安排在以后（即将转换为传递给setTimeout的函数），就像input.value="";一样。

if(answer == qs[cardIndex]["a"].toLowerCase()){
    input.setAttribute("style", "color:green; font-weight:bold;");**
    input.value = "Correct!";
} else{
    input.value = "Incorrect!";
}
setTimeout(function(){
    input.value = "";
    input.removeAttribute("style");
}, 1000);

Answer 2

您正在设置属性并在同一时刻将其删除。如果目标是在延迟一秒后将其删除，那么就像：

setTimeout(function(){
    input.value="";
    input.removeAttribute("style");
},1000);

Answer 3

将input.removeAttribute放在setTimeout的函数中：

            setTimeout(function(){input.value="";input.removeAttribute("style");},1000);

这将在1秒后删除样式。

Answer 4

我认为input.removeAttribute("style");正在删除最初设置的整个样式。我建议的另一种更简单的方法是分配一些CSS类并根据类定义样式。使用setAttribute和removeAttribute方法可能没用，但为您提供相同的功能。