Fatal编程技术网
  • javascript/
  • Javascript Can'；因为某种原因，你不能让那个div重新出现吗？

Javascript Can'；因为某种原因，你不能让那个div重新出现吗？

javascript html

Javascript Can'；因为某种原因，你不能让那个div重新出现吗？,javascript,html,Javascript,Html,我只是在玩弄我的浏览器游戏想法，但由于某种原因，当我第一次测试时，对敌人的计数器造成伤害，数学生成器不知何故停止了战斗按钮的再次出现？？（参见HaimheadFunction{}） 我为代码的不清晰道歉，这只是一个艰难的过程 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

我只是在玩弄我的浏览器游戏想法，但由于某种原因，当我第一次测试时，对敌人的计数器造成伤害，数学生成器不知何故停止了战斗按钮的再次出现？？（参见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>


var=100；
如果（敌人>0）{
写（敌人）；
函数fightFunction（）{
document.getElementById（'2ndmenu'）.style.display=“block”；
document.getElementById（'1stmenu'）.style.display=“无”；
}
函数名为function（）{
document.getElementById（'headsmashmenu'）.style.display=“block”；
document.getElementById（'2ndmenu'）.style.display=“无”；
}
函数punchFunction（）{
document.getElementById（'punchmenu'）.style.display=“block”；
document.getElementById（'2ndmenu'）.style.display=“无”；
}
函数kickFunction（）{
document.getElementById（'kickmenu'）.style.display=“block”；
document.getElementById（'2ndmenu'）.style.display=“无”；
}
函数HaimheadFunction（）{
document.getElementById（'1stmenu'）.style.display=“block”；
document.getElementById（'headsmashmenu'）.style.display=“无”；
var number=Math.floor（（Math.random（）*100））；
文件。书写（编号）；
如果（数量<30）{
文件。书写（'damage=30！'）；
敌人=敌人-100；
写（敌人）；
}
否则{
写下（‘你错过了’）；
}
}
}
否则{
文档。写（“你赢了！
”）；
}
搏斗
头巾
用拳猛击
踢
瞄准头部
瞄准身体
瞄准腿
瞄准头部
瞄准身体
瞄准腿
瞄准头部
瞄准身体
瞄准腿
您正在对输出消息使用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>


var output=document.getElementById（'output'）；
var=100；
如果（敌人>0）{
output.innerHTML=敌人；
函数fightFunction（）{
document.getElementById（'2ndmenu'）.style.display=“block”；
document.getElementById（'1stmenu'）.style.display=“无”；
}
函数名为function（）{
document.getElementById（'headsmashmenu'）.style.display=“block”；
document.getElementById（'2ndmenu'）.style.display=“无”；
}
函数punchFunction（）{
document.getElementById（'punchmenu'）.style.display=“block”；
document.getElementById（'2ndmenu'）.style.display=“无”；
}
函数kickFunction（）{
document.getElementById（'kickmenu'）.style.display=“block”；
document.getElementById（'2ndmenu'）.style.display=“无”；
}
函数HaimheadFunction（）{
document.getElementById（'1stmenu'）.style.display=“block”；
document.getElementById（'headsmashmenu'）.style.display=“无”；
var number=Math.floor（（Math.random（）*100））；
output.innerHTML=number；
如果（数量<30）{
output.innerHTML+='damage=30！'；
敌人=敌人-100；
output.innerHTML=敌人；
}
否则{
output.innerHTML+=“您错过了”；
}
}
}
否则{
output.innerHTML=“你赢了！
”；
}
搏斗
头巾
用拳猛击
踢
瞄准头部
瞄准身体
瞄准腿
瞄准头部
瞄准身体
瞄准腿
瞄准头部
瞄准身体
瞄准腿
好的，document.write（x）的意思是，一旦文档完全加载，它将重写文档正文中的所有内容—删除过程中已经存在的所有内容。你可以读更多。如果您只是想替换div中的文本，可以使用element.innerHTML属性进行检查

也考虑使用jQuery：它极大地简化了在DOM和多个元素中更新元素的交互。是的，现在我将使用jQuery！再次感谢！啊，好吧，太好了，我已经远离编码好几年了，所以完全忘了这个！非常感谢！：）