我在这里遇到了这段代码的问题,而我似乎无法找到原因。
<body>
<h1 id="score" style="text-align:center;align:center;">
Get Ready
</h1>
<div style="height:450px;width:90%;background-color:white;border:5px solid lime;border-radius:1%;margin:0px;padding:0px">
<button onclick="clicked(1)" id="1" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px">
</button>
<button onclick="clicked(2)" id="2" style="background-color:white;width:32.4%;height:33%;border:0px;padding:0px;margin:0px">
</button>
<button onclick="clicked(3)" id="3" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px">
</button>
<button onclick="clicked(4)" id="4" style="background-color:white;width:33%;height:31.9%;border:0px;padding:0px;margin:0px">
</button>
<button onclick="clicked(5)" id="5" style="background-color:white;width:32.4%;height:31.9%;border:0px;padding:0px;margin:0px">
</button>
<button onclick="clicked(6)" id="6" style="background-color:white;width:33%;height:31.9%;border:0px;padding:0px;margin:0px">
</button>
<button onclick="clicked(7)" id="7" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px">
</button>
<button onclick="clicked(8)" id="8" style="background-color:white;width:32.4%;height:33%;border:0px;padding:0px;margin:0px">
</button>
<button onclick="clicked(9)" id="9" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px">
</button>
<script>
setTimeout(function(){ document.getElementById("score").innerHTML="3"; }, 3000);
setTimeout(function(){ document.getElementById("score").innerHTML="2"; }, 4000);
setTimeout(function(){ document.getElementById("score").innerHTML="1"; }, 5000);
setTimeout(function(){ document.getElementById("score").innerHTML="GO"; game(); }, 6000);
function game(){
setTimeout(function(){ document.getElementById("score").innerHTML="No points"; gamesetup(); }, 500);
function gamesetup(){
var game=true;
var score=0;
var litNum;
gameloop();
}
}
function gameloop(){
if(game){
var solved=false;
var litNum=Math.floor(Math.random() * (9 - 1 + 1)) + 1;
var litNum=litNum.toString();
document.getElementById(litNum).style.backgroundColor="#FFFF00";
}else{
document.getElementById("score").innerHTML="Game Over at: "+score+".";
}
}
function clicked(number){
if(number==litNum&&game){
if(!solved){
var score=score+1;
var solved=true;
}
}else{
var game=false;
var solved=false;
}
document.getElementById("score").innerHTML="Score: "+score+".";
}
</script>
</div>
</body>
出于某种原因,它不会写'&#34;得分:0。&#34;就像在ID得分一样。我之前已经在这个程序中写过,这很好用。有谁知道这个问题? (以及如何修复它?)
答案 0 :(得分:4)
这可能无法解决所有问题,但看起来似乎已经解决,得分应该是全局变量。你应该只声明它们一次,并且应该在函数之外声明它们。
var solved = false;
var score = 0;
function clicked(number){
if(number==litNum&&game){
if(!solved){
score=score+1;
solved=true;
}
}else{
game=false;
solved=false;
}
document.getElementById("score").innerHTML="Score: "+score+".";
}
使用Firebug或类似工具逐步执行代码,看看发生了什么。
答案 1 :(得分:1)
litNum
未定义:if (number == litNum && game) {
您必须在全局空间中定义所有全局var
。每次要访问它时都不要重用var
!!!
以下是工作代码:
<body>
<h1 id="score" style="text-align:center;align:center;">
Get Ready
</h1>
<div style="height:450px;width:90%;background-color:white;border:5px solid lime;border-radius:1%;margin:0px;padding:0px">
<button onclick="clicked(1)" id="1" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"></button>
<button onclick="clicked(2)" id="2" style="background-color:white;width:32.4%;height:33%;border:0px;padding:0px;margin:0px"></button>
<button onclick="clicked(3)" id="3" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"></button>
<button onclick="clicked(4)" id="4" style="background-color:white;width:33%;height:31.9%;border:0px;padding:0px;margin:0px"></button>
<button onclick="clicked(5)" id="5" style="background-color:white;width:32.4%;height:31.9%;border:0px;padding:0px;margin:0px"></button>
<button onclick="clicked(6)" id="6" style="background-color:white;width:33%;height:31.9%;border:0px;padding:0px;margin:0px"></button>
<button onclick="clicked(7)" id="7" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"></button>
<button onclick="clicked(8)" id="8" style="background-color:white;width:32.4%;height:33%;border:0px;padding:0px;margin:0px"></button>
<button onclick="clicked(9)" id="9" style="background-color:white;width:33%;height:33%;border:0px;padding:0px;margin:0px"></button>
<script>
setTimeout(function() {document.getElementById("score").innerHTML = "3";}, 3000);
setTimeout(function() {document.getElementById("score").innerHTML = "2";}, 4000);
setTimeout(function() {document.getElementById("score").innerHTML = "1";}, 5000);
setTimeout(function() {document.getElementById("score").innerHTML = "GO";game();}, 6000);
var game;
var score;
var litNum;
function game() {
setTimeout(function() {
document.getElementById("score").innerHTML = "No points";
gamesetup();
}, 500);
function gamesetup() {
game = true;
score = 0;
gameloop();
}
}
function gameloop() {
if (game) {
solved = false;
litNum = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
litNum = litNum.toString();
document.getElementById(litNum).style.backgroundColor = "#FFFF00";
} else {
document.getElementById("score").innerHTML = "Game Over at: " + score + ".";
}
}
function clicked(number) {
if (number == litNum && game) {
if (!solved) {
score = score + 1;
solved = true;
}
} else {
game = false;
solved = false;
}
document.getElementById("score").innerHTML = "Score: " + score + ".";
}
</script>
</div>
</body>