由于某种原因无法让 div 重新出现？
[英]Can't get the div to reappear for some reason?
问题描述
Im just messing about with a browser game idea I had but for some reason when I get to my first test , applying damage to the enemy counter , the maths generator somehow stops the fight button reappearing???( See the HaimheadFunction{})
我只是在搞一个浏览器游戏的想法，但出于某种原因，当我进行第一次测试时，对敌人计数器施加伤害时，数学生成器以某种方式阻止了战斗按钮重新出现？？？（参见 HaimheadFunction{}）
I apologize for the uncleanness of the code , it was just a rough go.我为代码的不干净道歉，这只是一个粗略的尝试。
<!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>
2 个解决方案
解决方案1
1 已采纳 2016-10-06 22:35:25
You are using document.write() for your output messages, which destroys all of the html and starts from scratch.您正在将 document.write() 用于输出消息，这会破坏所有 html 并从头开始。 Your should have an output div , into which you put your output using the HTMLElement.innerHTML property.您应该有一个输出div ，您可以使用HTMLElement.innerHTML属性将输出放入其中。
Here's your code with this change:这是带有此更改的代码：
<!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>
解决方案2
0 2016-10-06 22:38:52
Ok, so the thing about document.write(x) is that, once a document has been fully loaded, it will rewrite everything in the body of the document - removing all the content already there in the process.好的，关于 document.write(x) 的事情是，一旦一个文档被完全加载，它将重写文档正文中的所有内容 - 删除过程中已经存在的所有内容。 You can read morehere .您可以在此处阅读更多内容。 Perhaps check out using the element.innerHTML property if you simply want to replace the text in a div!如果您只想替换 div 中的文本，也许可以使用 element.innerHTML 属性进行检查！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.