Why does this function execute immediatly

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

The other code

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

    return dealtDamage;
}

I just started learning to code and have been following a tutorial, thought I would experiment, and I was wondering why does this not work. It executes immediatly and the buttons afterward does not work

If you got your answer, please do not forget to click the checkmark at the left side of the answer that was correct for you :). — KodeFor.Me, Sep 30 '20 at 08:55

KodeFor.Me · Answer 1 · 2020-09-30T08:52:56.747

1

You have to change your function invocation to the following:

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

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

The addEventListener second argument is a callback. The callback is executed once the event is raised.

Then the callback is calling the function you want.

UPDATE:

Due to debate with other members of StackOverflow, I remove the reference to the arrow functions as a callback.

They are right. If you are not experienced developer, it's probably a not good practice.

[....] Part of the answer Removed

edited Sep 30 '20 at 08:52

answered Sep 30 '20 at 08:36

KodeFor.Me

13,069
27
98
166

2

Downvoted as "not useful" for answering obvious duplicate – Sep 30 '20 at 08:42
How is the _"Sidenote"_ relevant? An arrow function doesn't change anything – Andreas Sep 30 '20 at 08:43
1

Caveat, using arrow function as listener can cause issues. By default, listener function has `this` pointing to current element. Using arrow function prevents it – Rajesh Sep 30 '20 at 08:44
@Andreas obviously it doesn't change anything. The member asking a very basic question, thus helping by providing more information is good though. – KodeFor.Me Sep 30 '20 at 08:44
@MerianosNikos maybe opinionated comment but marking dupes is always better. They have way more info as answer and as comments. You learn a lot by that. But just in case you wish to be that detailed, adding reference always helps – Rajesh Sep 30 '20 at 08:46
@Rajesh depends on the context and what you need to do. You are right for what you are mentioning. But what I personally found, is that the arrow functions working very well :) – KodeFor.Me Sep 30 '20 at 08:47
1

Arrow functions bring some distinct features with them that might cause more harm then good when OP uses them as you've suggested (_"replace the function() {} with () =>"_). At least add a link to a good documentation (e.g. MDN or here on SO) and add a note on those features. – Andreas Sep 30 '20 at 08:47
@Andreas it depends on the context you use the callback arrow functions. It's not white or black. You should be aware of what you have in your hands when you write your code. So far, the times I had issues with `this` in callbacks was just few, and was easy resolvable. – KodeFor.Me Sep 30 '20 at 08:49
1

@MerianosNikos Arrow functions are meant to be used in synonym to anonymous functions. So it will work fine. But they bring something extra, and if you do not know what that extra is, that is where you start making code fragile – Rajesh Sep 30 '20 at 08:50

Why does this function execute immediatly

1 Answers1

UPDATE: