.appendがクリックで機能しない

Question

クリックしたときに新しい<p>要素を作成するはずのシンプルなボタンですが、機能していないため、私が他のコードと比較した理由が分かりません。

Demo

var battle = function() { 
    while(monsterHP > 0){ 
     var playerDam = Math.floor(Math.random() * ((playerAtk - monsterAtk) + 2); 
     $('#battle').append("<p>You have hit the monster for " + playerDam + " damage. The monster has " + (monsterHP - playerDam) + "HP left</p>"); 
     monsterHP -= playerDam; 
     if(monsterHP <= 0) { 
      $('#battle').append("<p>You have defeated the monster</p>"); 
     } 
    } 
} 

$('#battleButton').click(function() { 
    battle(); 
} 

Answer 1

あなたはあなたのコード内の多くの構文エラーがあります。それらを訂正すると（以下のように）、正常に動作します。 JQuery appendを書くときは、引数の後ろに '）'を置く必要があります。同様に、関数の後に '}'を付ける必要があります。

var playerAtk = 5; 
var playerDef = 5; 
var playerHP = 10; 
var monsterAtk = 4; 
var monsterDef = 4; 
var monsterHP = 8; 

var battle = function() { 
    while(monsterHP > 0){ 
     var playerDam = Math.floor(Math.random() * ((playerAtk - monsterAtk) + 2)); 
     $('#battle').append("<p>You have hit the monster for " + playerDam + " damage. The monster has " + (monsterHP - playerDam) + "HP left</p>"); 
     monsterHP -= playerDam; 
     if(monsterHP <= 0) { 
      $('#battle').append("<p>You have defeated the monster</p>"); 
     } 
    } 
} 

$('#battleButton').click(function() { 
    battle(); 
});