Below is a flashcard game I have developed:
Once a user enters the correct answer in the text box, "Correct!" is expected to be displayed in bold green font. The CSS attributes are then supposed to be removed shortly after. Here is the HTML code for the input area:
<div>
<input type="text" id="answer" style="width: 80%; height: 30px;" placeholder="Enter your answer..." onkeyup="checkAnswer(this,event);" autofocus><br>
</div>
The accompanying JavaScript responsible for this functionality is as follows:
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();
}
}
}
All functionalities within the checkAnswer function work except for the setAttribute and removeAttribute methods, which have been highlighted in the code snippet. I have attempted to place the removeAttribute method after the for loop without success. If the removeAttribute method is omitted, the setAttribute works, however, I do not want the text to remain green.
I would greatly appreciate any assistance with this matter!
Feel free to ask if further information is required to understand the issue!
Thank you!