Question

const ATTACK_VALUE = 10;
const STRONG_ATTACK_VALUE = 17;
const MONSTER_ATTACK_VALUE = 14;

function attackHandler( typeOfAttack ) {
    const damageOne = typeOfAttack
    const damageTwo = dealMonsterDamage(damageOne)

    currentMonsterHealth -= damageTwo;
    playerDamage = dealPlayerDamage(MONSTER_ATTACK_VALUE);
    currentPlayerHealth -= playerDamage;

    if ( currentMonsterHealth <= 0 && currentPlayerHealth > 0 ) {
        alert('You won!');
    } else if ( currentPlayerHealth <= 0 && currentMonsterHealth > 0 ) {
        alert('You lost!');
    } else if ( currentPlayerHealth <= 0 && currentMonsterHealth <= 0 ) {
        alert('You have a draw');
    }        
}
        
        
attackBtn.addEventListener( 'click', attackHandler( ATTACK_VALUE ) );
strongAttackBtn.addEventListener( 'click', attackHandler( STRONG_ATTACK_VALUE ) );

其他代码

function dealMonsterDamage(damage) {
    const dealtDamage = Math.random() * damage;
    monsterHealthBar.value = +monsterHealthBar.value - dealtDamage;

    return dealtDamage;
}

我刚刚开始学习编码，并且一直在学习教程，以为可以尝试，所以我想知道为什么这行不通。立即执行，之后的按钮不起作用

Answer 1

您必须将函数调用更改为以下内容：

attackBtn.addEventListener(
    'click', 
    function() {
        attackHandler(ATTACK_VALUE);
    }
);

strongAttackBtn.addEventListener(
    'click', 
    function() { 
        attackHandler(STRONG_ATTACK_VALUE); 
    }
);

addEventListener的第二个参数是回调。引发事件后，将执行回调。

然后回调正在调用所需的函数。

更新：

由于要与StackOverflow的其他成员进行辩论，我删除了对箭头函数的引用作为回调。

他们是对的。如果您不是经验丰富的开发人员，那么这可能不是一个好习惯。

[....]部分答案已删除

为什么此函数立即执行

1 个答案:

更新：