Почему методы .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();
        }
    }
}

Все работает в функции checkAnswer, кроме методов setAttribute и removeAttribute, которые были отмечены в фрагменте кода. Я попытался поместить метод removeAttribute после цикла for, и это не сработает. Если я не включаю метод removeAttribute, работают методы setAttribute, но я не хочу, чтобы текст оставался зеленым.

Если бы кто-нибудь мог помочь мне в этом, это было бы здорово!

Если вам нужна дополнительная информация, чтобы понять вопрос, не стесняйтесь спрашивать!

Спасибо!