Javascript超时div

Question

我收到一条提醒，说您 right/wrong。我想放置一个会显示几秒钟的 div 而不是警报。 So when the right/wrong answer is chosen this div will appear instead of the alert.我知道需要一个超时功能，但我似乎无法让它工作。我已经尝试了几次，但没有任何效果。有谁知道我会怎么做？

这是 html (divs)

<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 值中使用的是 space。 :-) 所以我们需要更改那些 ids.

但是让它们开始不可见是一件简单的事情 (display: none)，显示相关的 (display: block)，然后在延迟后通过 [=16= 再次隐藏它].

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>

Answer 2

希望能帮到你

var score = 0;
var oddoneout = Array();
oddoneout[0] = {answer: "2"};
var currentQuestionIndex = 0;

var btnReply = document.getElementById("reply");

btnReply.onclick = function(){
    var answer = document.getElementById("answer").value;
    characterclicked(answer);
};

function characterclicked(nr) {  
    var feedback = document.getElementById("right_answer");
    if (nr == oddoneout[currentQuestionIndex].answer) { 
        score+= 200;
    }else{
        //alert("you are wrong it was " +   oddoneout[currentQuestionIndex].characterName);
        feedback = document.getElementById("your_wrong");
    }
    feedback.style.display = "block";
    setTimeout(function(){ 
        feedback.style.display = "none";
    }, 2000);
    //nextQuestion();
}

.feedback {
    display: none;
    color: red
}

<div class="question">
    how many is 1 + 1 ?
</div>
<input type="text" id="answer" />
<input type="button" id="reply" value="reply" />
<div id = "your_wrong" class="feedback"> 
wrong answer!
</div>
<div id = "right_answer" class="feedback">
Right answer! 
</div>

Answer 3

您应该做的第一件事是使包含消息的元素不可见。您可以通过在元素的 style 属性或 CSS 样式 sheet（首选）中使用 display: none 来做到这一点。

接下来，我们将制作一个显示消息的函数。由于它可以显示两条消息中的任何一条，因此它需要一个参数，因此它知道是显示 "right" 还是 "wrong".

function showMessage(right) { ... }

right 参数可以是布尔值以保持简单。从这里开始，我们可以只使用一个 <div> 并根据 right 是否为真来更改它的文本。

让我们给它一个 id 的 message（你在你的 ID 中使用了空格，你不能这样做）。

function showMessage(right) {
    var text = "You are ";
    text += right? "right" : "wrong";
    // Let's get the result <div>
    var messageDiv = document.getElementById("message");
    // and change it's text
    messageDiv.innerText = text;
}

现在，剩下的就是显示消息 <div>，几秒钟后让它再次消失。让我们为这个例子使用 5 秒。 5 秒是 5000 毫秒，这是超时函数使用的单位。

function showMessage(right) {
    var text = "You are ";
    text += right? "right" : "wrong";
    // Let's get the result <div>
    var messageDiv = document.getElementById("message");
    // and change it's text
    messageDiv.innerText = text;
    // and show it, and hide it after 5 seconds
    messageDiv.style.display = "block";
    setTimeout(function(){
        messageDiv.style.display = "none";    
    }, 5000);
}

就是这样！如果您使用 true 作为参数调用该函数，它将显示 "You are right"。否则，它将显示 "You are wrong".

这里有一个 Jsfiddle 供您查看它的工作情况。

编辑

如果你还想在用户错误时显示正确答案，你可以使用第二个参数：

function showMessage(right, answer) {
    var text = "You are ";
    text += right? "right!" : "wrong. The answer was " + answer;
    ...
}

Javascript超时div

Javascript time out div

html

javascript

time

function