Question

我只是搞乱了浏览器游戏的想法，但由于某种原因，当我进行第一次测试时，对敌人计数器施加伤害时，数学生成器会以某种方式停止战斗按钮再次出现???（参见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>

Answer 1

您正在使用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>

Answer 2

好吧，关于document.write（x）的问题是，一旦文档完全加载，它将重写文档正文中的所有内容 - 删除过程中已存在的所有内容。您可以阅读更多here。如果您只想替换div中的文本，可以使用element.innerHTML属性检查！

由于某种原因，不能让div重新出现？

2 个答案: