尝试创建简单的游戏。
这个想法是为10个不同的问题创建IF语句，每个问题都会有4个不同的答案。到目前为止，一切都很好，但是，当我选择第一个答案时，而不是转到下一个" else if"问题时，它被卡住了。
关于如何实现这一目标的任何想法？
我正在考虑使用开关，但是选择答案是通过使用document.addEventListener("click" .....
<p>文本的答案。这是我到目前为止的JS代码：
<script>
var question = 1;
if (question === 1){
document.getElementById("A").addEventListener("click", function(){
document.getElementById("A").innerHTML = "Pozna!";
document.getElementById("score").innerHTML = "score = -300$";
question +=1;
});
// ----------------------------------------------
document.getElementById("B").addEventListener("click", function(){
document.getElementById("B").innerHTML = "Sucker! You lost the game! Momchil took all your MONEY at once!";
setTimeout(reLoad, 3000);
});
// ----------------------------------------------
document.getElementById("C").addEventListener("click", function(){
document.getElementById("C").innerHTML = "Sucker! You lost the game! Momchil took all your MONEY at once!";
setTimeout(reLoad, 3000);
});
// ----------------------------------------------
document.getElementById("D").addEventListener("click", function(){
document.getElementById("D").innerHTML = "Sucker! You lost the game! Momchil took all your MONEY at once!";
setTimeout(reLoad, 3000);
});
}
} else if (question === 2){
document.getElementById("A").addEventListener("click", function(){
document.getElementById("A").innerHTML = "Hello World";
setTimeout(reLoad, 3000);
});
// ----------------------------------------------
document.getElementById("B").addEventListener("click", function(){
document.getElementById("B").innerHTML = "Hello World";
setTimeout(reLoad, 3000);
});
// ----------------------------------------------
document.getElementById("C").addEventListener("click", function(){
document.getElementById("C").innerHTML = "Hello World";
setTimeout(reLoad, 3000);
});
// ----------------------------------------------
document.getElementById("D").addEventListener("click", function(){
document.getElementById("D").innerHTML = "Hello World";
setTimeout(reLoad, 3000);
});
}
</script>
这是一个更好的开始。您可以添加答案，而无需重新加载，只需替换问题
您的位置绝对无法很好地工作
var question = 0,
score = 0,
error = "Sucker! You lost the game! Momchil took all your MONEY at once!",
ok = "Well done",
questions = [{
"Q": "1 What does the following sentence mean - 'The Horses are on the way!'",
"answers": {
"A": {
"title": "And what if I am not the correct answer?",
"money": -300,
"text": "$O$ (Money) is on the way!"
},
"B": {
"title": "Psst, hey .. it is the answer before me.",
"money": -300,
"text": "It's almost Todorov den."
},
"C": {
"title": "JUST CLICK ME MAN!",
"money": 100,
"text": "Rohan will attack soon."
},
"D": {
"title": "Sladko na Ostencata!",
"money": -300,
"text": "There are farmers nearby."
}
}
},
{
"Q": "2 What does the following sentence mean - 'The Horses are on the way!'",
"answers": {
"A": {
"title": "2 And what if I am not the correct answer?",
"money": -300,
"text": "2 $O$ (Money) is on the way!"
},
"B": {
"title": "2 Psst, hey .. it is the answer before me.",
"money": -300,
"text": "2 It's almost Todorov den."
},
"C": {
"title": "2 JUST CLICK ME MAN!",
"money": 100,
"text": "2 Rohan will attack soon."
},
"D": {
"title": "2 Sladko na Ostencata!",
"money": -300,
"text": "2 There are farmers nearby."
}
}
}
];
function nextQ() {
var q=questions[question], ids = ["A","B","C","D"],
a = document.getElementById("A"),
b = document.getElementById("B"),
c = document.getElementById("C"),
d = document.getElementById("D"),
answers = q.answers;
document.getElementById("Questions").innerHTML=q.Q;
for (var i=0;i<ids.length;i++) {
var id=ids[i],p = document.getElementById(id);
p.title=answers[id].title;
p.innerHTML=answers[id].text;
}
}
window.onload = function() {
var answers = document.querySelectorAll(".answer");
var q = questions[question]
for (var i = 0; i < answers.length; i++) {
answers[i].addEventListener("click", function() {
var act = questions[question].answers[this.id];
score += act.money;
document.getElementById("score").innerHTML = "$" + score;
if (act.money>0) { // positive amount will go to next question
question += 1;
this.innerHTML = ok;
}
else {
this.innerHTML = error;
// you can reset the score here since one error will be fatal
// unless subsequent questions give more money
}
setTimeout(nextQ,2000)
});
}
nextQ(); // first question
}html {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat: no-repeat;
background: -webkit-linear-gradient( to left top, #e16525, #fbd109);
background: -moz-linear-gradient( to left top, #e16525, #fbd109);
background: -ms-linear-gradient( to left top, #e16525, #fbd109);
background: -o-linear-gradient( to left top, #e16525, #fbd109);
background: linear-gradient( to left top, #e16525, #fbd109);
}
#score {
position: absolute;
top: 0.1%;
left: 42%;
}
#A {
position: absolute;
top: 72%;
left: 12%;
}
#B {
position: absolute;
top: 75%;
left: 12%;
}
#C {
position: absolute;
top: 78%;
left: 12%;
}
#D {
position: absolute;
top: 81%;
left: 12%;
}
#img1 {
width: 10%;
height: 40%;
}<p id="score">score = 0$</p>
<div style=" height:0; width:80%; padding-bottom:5%; background-color:rgba(0, 0, 0, 0.2); position:absolute; top:60%; left:10%; border-style: solid; border-width: 10px;">
<div id="Questions" style="padding-top: 15px; padding-right: 10px; padding-bottom: 10px; padding-left: 15px;">
</div>
</div>
<p class="answer" id="A" title=""></p>
<p class="answer" id="B" title=""></p>
<p class="answer" id="C" title=""></p>
<p class="answer" id="D" title=""></p>
<img id="img1" title="Mahni si mishkata ot men ue, papancho!" src="https://sarahkerrigan.biz/wpmtest/newgame/barovec.png" style=" position:absolute; top:17%; left:50%;" /></a>