JavaScript 超时 div

Question

我收到一条提醒，提示您是对/错。我想放置一个将出现几秒钟的 div 而不是警报。因此，当选择正确/错误的答案时，将出现此 div 而不是警报。我知道需要一个超时功能，但我似乎无法让它工作。我尝试了几次，但没有任何效果。有谁知道我会怎么做？

这是 html (div)

<div id = "your wrong"> 
wrong answer!
</div>


<div id = "right answer">
Right answer! 
</div>

这是警报的 JavaScript

function characterclicked(nr) {  

if (nr == oddoneout[currentQuestionIndex].answer) {  
alert("You're right!");
score+= 200;;
}
else{
alert("you are wrong it was " +   oddoneout[currentQuestionIndex].characterName);
}

nextQuestion();


}

Answer 1

HTML 中唯一不允许在 id 值中使用的内容就是空格。 :-) 所以我们需要更改这些 id。

但是，让它们一开始不可见(display: none)，显示相关的(display: block)，然后再次隐藏它就很简单了通过 setTimeout 延迟后。

document.getElementById("btnRight").onclick = function() {
  show("right");
};
document.getElementById("btnWrong").onclick = function() {
  show("wrong");
};

function show(id) {
  var element = document.getElementById(id);
  element.style.display = "block";
  setTimeout(function() {
    element.style.display = "none";
  }, 1000); // 1000ms = 1 second
}

<div id="wrong" style="display: none">
wrong answer!
</div>

<div id="right" style="display: none">
Right answer! 
</div>

<div>
  <input type="button" id="btnRight" value="Show Right">
  <input type="button" id="btnWrong" value="Show Wrong">
</div>