何らかの理由でdivが再表示されないことがありますか？

私は最初のテストに行って何らかの理由で敵のカウンターにダメージを与える何らかの理由でブラウザのゲームのアイデアを乱してしまった。数学ジェネレーターは何とか戦闘ボタンを再表示するのを止めるだろうか？（HaimheadFunction { ）何らかの理由でdivが再表示されないことがありますか？

私はコードの汚れをお詫びします、それはちょうど大まかなものでした。

<!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>

出典

2016-10-06 Jack Johnson

jQueryの使用を検討してください：DOM内の要素の更新などの操作を大幅に簡素化します。 – sal

はい、私は今jqueryを使用しています！再度、感謝します！ –

出力メッセージに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>

出典

2016-10-06 22:35:25

ああ、大丈夫、完璧な、私はこれを完全に忘れてしまったので、良い数年のコーディングから離れていた！本当にありがとう！ :) –

オクラホマので、のdocument.writeについての事（x）はドキュメントが完全にロードされたら、それは体のすべてを書き換えます、ということですdocument - プロセス内のすべてのコンテンツを削除します。あなたはhereをもっと読むことができます。おそらく、divのテキストを置き換えたい場合は、element.innerHTMLプロパティを使用してチェックアウトしてください。

出典

2016-10-06 22:38:52

何らかの理由でdivが再表示されないことがありますか？

答えて

関連する問題