javascript - 为什么.setAttribute()和.removeAttribute方法在我的JavaScript代码中不起作用？

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



用户在文本框中输入正确答案后，单词“正确！”应该以粗体绿色显示，然后不久之后应该删除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函数中起作用。我试过将removeAttribute方法放置在for循环之后，但这不起作用。如果我不包括removeAttribute方法，则setAttribute方法可以工作，但是我不希望文本保持绿色。

如果有人可以帮助我，那就太好了！

如果您需要更多信息来理解问题，请随时提出！

谢谢！

最佳答案

添加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);

关于javascript - 为什么.setAttribute()和.removeAttribute方法在我的JavaScript代码中不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20645334/