Javascript 超时 div

Question

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

这是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 值中，您唯一不能使用的就是空格。 :-) 所以我们需要更改那些ids。

但是，让它们从不可见 (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>

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 样式表（首选）中使用 display: none 来做到这一点。

接下来，我们将制作一个显示消息的函数。由于它可以显示两条消息中的任何一条，它会接受一个参数，因此它知道是显示“正确”还是“错误”。

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 作为参数调用该函数，它将显示“你是对的”。否则，它会显示“你错了”。

这是一个Jsfiddle，供您查看它的工作原理。

编辑

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

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