.append无法点击

Question

简单按钮应该在<p>点击时创建新元素,但它不起作用,我不知道为什么我将它与我的其他代码进行比较.

演示

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追加时,你需要在你的论证之后放一个')'.同样,函数需要在它们后面加上'}'.

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();
});