我只是在胡思乱想我有一个浏览器游戏的想法，但由于某种原因，当我到我的第一个测试，应用损害敌人的计数器，数学生成器不知何故停止战斗按钮重新出现？??（参见HaimheadFunction{}）
我为代码的不干净道歉，这只是一个艰难的过程。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<script>
var enemy = 100;
if (enemy > 0 ) {
document.write(enemy);
function fightFunction() {
document.getElementById('2ndmenu').style.display = "block";
document.getElementById('1stmenu').style.display = "none";
}
function headsmashFunction() {
document.getElementById('headsmashmenu').style.display = "block";
document.getElementById('2ndmenu').style.display = "none";
}
function punchFunction() {
document.getElementById('punchmenu').style.display = "block";
document.getElementById('2ndmenu').style.display = "none";
}
function kickFunction() {
document.getElementById('kickmenu').style.display = "block";
document.getElementById('2ndmenu').style.display = "none";
}
function HaimheadFunction() {
document.getElementById('1stmenu').style.display = "block";
document.getElementById('headsmashmenu').style.display = "none";
var number = Math.floor((Math.random() * 100));
document.write(number);
if (number < 30 ) {
document.write('damage= 30!');
enemy = enemy - 100 ;
document.write(enemy);
}
else{
document.write('you missed');
}
}
}
else{
document.write('<p> you win! </p>');
}
</script>
<div id="1stmenu" style="display: block;">
<button onclick="fightFunction()">FIGHT</button>
</div>
<div id="2ndmenu" style="display: none;">
<button onclick="headsmashFunction()">Headsmash</button>
<button onclick="punchFunction()">Punch</button>
<button onclick="kickFunction()">kick</button>
</div>
<div id="headsmashmenu" style="display: none;">
<button onclick="HaimheadFunction()">AIM FOR HEAD</button>
<button onclick="HaimbodyFunction()">AIM FOR BODY</button>
<button onclick="HaimlegFunction()">AIM FOR LEGS</button>
</div>
<div id="punchmenu" style="display: none;">
<button onclick="BaimheadFunction()">AIM FOR HEAD</button>
<button onclick="BaimbodyFunction()">AIM FOR BODY</button>
<button onclick="BaimlegFunction()">AIM FOR LEGS</button>
</div>
<div id="kickmenu" style="display: none;">
<button onclick="LaimheadFunction()">AIM FOR HEAD</button>
<button onclick="LaimbodyFunction()">AIM FOR BODY</button>
<button onclick="LaimlegFunction()">AIM FOR LEGS</button>
</div>
</body>
</html>
最佳答案
您正在对输出消息使用document.write（），它将销毁所有html并从头开始。您应该有一个输出div，使用HTMLElement.innerHTML属性将输出放入其中。
这是您的代码和此更改：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="output"></div>
<script>
var output = document.getElementById('output');
var enemy = 100;
if (enemy > 0 ) {
output.innerHTML = enemy;
function fightFunction() {
document.getElementById('2ndmenu').style.display = "block";
document.getElementById('1stmenu').style.display = "none";
}
function headsmashFunction() {
document.getElementById('headsmashmenu').style.display = "block";
document.getElementById('2ndmenu').style.display = "none";
}
function punchFunction() {
document.getElementById('punchmenu').style.display = "block";
document.getElementById('2ndmenu').style.display = "none";
}
function kickFunction() {
document.getElementById('kickmenu').style.display = "block";
document.getElementById('2ndmenu').style.display = "none";
}
function HaimheadFunction() {
document.getElementById('1stmenu').style.display = "block";
document.getElementById('headsmashmenu').style.display = "none";
var number = Math.floor((Math.random() * 100));
output.innerHTML = number;
if (number < 30 ) {
output.innerHTML += ' damage = 30!';
enemy = enemy - 100 ;
output.innerHTML = enemy;
}
else{
output.innerHTML += ' you missed';
}
}
}
else{
output.innerHTML = '<p> You win! </p>';
}
</script>
<div id="1stmenu" style="display: block;">
<button onclick="fightFunction()">FIGHT</button>
</div>
<div id="2ndmenu" style="display: none;">
<button onclick="headsmashFunction()">Headsmash</button>
<button onclick="punchFunction()">Punch</button>
<button onclick="kickFunction()">kick</button>
</div>
<div id="headsmashmenu" style="display: none;">
<button onclick="HaimheadFunction()">AIM FOR HEAD</button>
<button onclick="HaimbodyFunction()">AIM FOR BODY</button>
<button onclick="HaimlegFunction()">AIM FOR LEGS</button>
</div>
<div id="punchmenu" style="display: none;">
<button onclick="BaimheadFunction()">AIM FOR HEAD</button>
<button onclick="BaimbodyFunction()">AIM FOR BODY</button>
<button onclick="BaimlegFunction()">AIM FOR LEGS</button>
</div>
<div id="kickmenu" style="display: none;">
<button onclick="LaimheadFunction()">AIM FOR HEAD</button>
<button onclick="LaimbodyFunction()">AIM FOR BODY</button>
<button onclick="LaimlegFunction()">AIM FOR LEGS</button>
</div>
</body>
</html>
</body>
</html>