我使用变量创建了一个基本的分数计数器。
基本上当你点击一个框时会发生什么，如果变量findbomb等于函数选择的参数，那么它会说你赢了，它应该为变量score加1但是如果变量findbomb与参数num不同，那么如果你说丢失并从分数中拿走1分。
但由于某种原因，即使我使用score++增加变量，它也拒绝这样做，并且Chrome中的开发人员菜单中没有弹出错误。
<!doctype html>
<html>
<head>
<title>Assignment</title>
<style>
body{background:black;}
#game{width:1282px;
position:absolute;top:15%;left:50%;
margin-left:-642px;}
#background{width:1282px;}
#covered{width:1282px;
position:absolute;left:50%;top:70%;
margin-left:-642px;
z-index:100;}
#filled{width:1282px;
position:absolute;top:70%;
z-index:50;}
#box0{position:absolute;;left:20%;}
#box1{position:absolute;left:60%;}
.bombonleft{position:absolute;left:20%;}
.blankonright{position:absolute;left:60%;}
.blankonleft{position:absolute;left:20%;}
.bombonright{position:absolute;left:60%;}
#rules{width:500px;
text-align:center;
background:red;
position:absolute;top:10%;left:50%;
margin-left:-250px;
z-index:300;
display:none;}
#feedback{position:absolute;left:50%;top:10%;
margin-left:-300px;
width:600px;
height:auto;
font-size:200%;
font-family:sans-serif;
text-align:center;
background:red;
display:none;}
#scores{position:absolute;top:10%;left:5%;
width:50px;
text-align:center;
font-size:300%;
font-family:sans-serif;
background:red;}
#timer{position:absolute;top:30%;left:50%;
margin-left:-236px;}
#countdown{width:300px;
text-align:center;
position:absolute;
left:50%;
top:35%;
font-family:sans-serif;
font-size:1000%;
margin-left:-150px;
color:red;
}
#title{text-align:center;
font-family:sans-serif;
font-size:300%;
color:red;
}
#finder{background:red;}
#new{background:red;}
</style>
</head>
<body>
<div id="title">
<p>Find the Bomb!</p>
</div>
<div id ="game">
<div id="covered">
<img id="box0" src="closed.png" onclick="choose(0);">
<img id="box1" src="closed.png" onclick="choose(1);">
</div>
<div id="filled">
<img id ="bomb" class="bombonright" src="bomb .png">
<img id="blank" class="blankonleft" src="empty.png">
</div>
<div id="background">
<div id="scores"> 2 </div>
<img id="backround"src="new background.png">
</div>
<div id="buttons">
<button id="Restartbtn" onclick="start();">Restart</button>
<button id="Rulesbtn" onclick = "showrules();">?</button>
</div>
<div id="rules">
<p> You awake to find yourself locked in this room with two boxes at your feet.</p>
<p> A voice comes over a speaker and states "Welcome, you have been chosen to take part in a little game. At your feet you will find two boxes. One is empty and the other contains a enough explosives to reduce you to dust. The aim of the game is simple find the bomb.</p>
<p> However, there are some rules</p>
<p> Firstly you must make a choice within 5 seconds , otherwise the bomb explodes. There is a timer that counts down so be ware<p>
<p> You may only choose one box </p>
<p> Choose correctly and you may advance to the next round <p>
<p> If you survive a round you will get a point ,once you have 5 you will be set free <p>
<p> However if you fail to find the bomb , you will lose a point. Once you score hits -5 , the bomb will detonat<p>
<p> The game begins as soon as you press close on this message, if you need to select it again press the "?" button<p>
<button onclick="hiderules();"> CLOSE </button>
</div>
<div id="feedback">
You lost! <br>Fortunately this bomb was a fake!
</div>
<div id="timer">
<img src="timer.png">
</div>
<div id="countdown">
2:00
</div>
<div id="finder">
fdafdsfa
</div>
<div id="new">
2ffdaj
</div>
</div>
<script>
var findbomb=1;
var clickable = false;
var score = 0;
window.onload = start();findme();newscore();
function findme()
{document.getElementById('finder').innerHTML = findbomb;}
function newscore()
{document.getElementById('new').innerHTML = score;};
function start()
{score=0;
showscore();
setup();};
function showscore()
{document.getElementById('scores').innerHTML= score;};
function hidebox()
{document.getElementById('box0').style.display = "block";
document.getElementById('box1').style.display = "block";};
function hidefeedback()
{document.getElementById('feedback').style.display = "none";};
function showbfeedback()
{document.getElementById('feedback').style.display = "block";
setTimeout(setup, 1000);
};
function showrules()
{document.getElementById('rules').style.display = "block";};
function hiderules()
{document.getElementById('rules').style.display = "none";};
function play()
{ findbomb = Math.floor(Math.random()*2);
if (findbomb == 0)
{document.getElementById('bomb').setAttribute("class", "bombonleft");
document.getElementById('blank').setAttribute("class", "blankonright");}
else if (findbomb == 1)
{document.getElementById('bomb').setAttribute("class", "bombonright");
document.getElementById('blank').setAttribute("class", "blankonleft");}
clickable=true;
};
function setup()
{hidefeedback();
hidebox();
play();};
function choose(num)
{if (clickable = true)
{document.getElementById('box'+num).style.display = "none";
if(findbomb ==num)
{document.getElementById('feedback').innerHTML = "You Win"; score++;}
else if (findbomb != num)
{document.getElementById('feedback').innerHTML ="You lose, fortunately that one was a fake!";score--;};
setTimeout(showbfeedback, 1000);
clickable= false;
}
}
</script>
</body>
</html>
答案 0 :(得分：1)
您需要将window.onload设置为功能。不要undefined。
执行window.onload = start();后，您立即 start() 并分配其返回值（{{ 1}}）到undefined - 什么都不做。
你想要做任何一件事：
window.onload或：
window.onload = start;
答案 1 :(得分：1)
所以当你遇到这样的问题时，你应该在某些点打印出预期的值，或者更好的是，使用断点然后遍历代码。在这种情况下，只需在Chrome等浏览器中打开页面，然后打开开发人员工具（Chrome中的f12）。然后设置一个断点，一次向前走一步。
啊，我现在看到你的评论，关于开发者工具中没有任何内容。这意味着你需要回到原点，找出你的代码没有被执行的原因，这与你的变量设置无关。
答案 2 :(得分：0)
分数未显示，因为需要在html页面上更新。
在最后一个if else if子句之后尝试放置类似的东西：
document.getElementById('scores').innerHTML = ""+score;
这应该会在页面上更新您的分数。