My JavaScript function runs without being called [duplicate]

Question

The function tablePush pushes an id to the table upon a click on an item.
However, it runs without a click and I don't understand why.

Here is my code:

function tablePush() {
    console.log('OK');
    if (pickPicture) {
        console.log('TRUE');
    } else {
        console.log('on rentre dans le else');
        console.log(this);
        var idPic = this.getAttribute('id');
        console.log(idPic);
        table.push(idPic);
        pickPicture = true;
    }
}

var picture = document.getElementsByClassName('picture'),
    table = [],
    pickPicture = false;

for (var i = 0; i < picture.length; i++){
    picture[i].addEventListener('click', tablePush());
}

@Quentin — Better dupe target: addEventListener in Javascript triggers the click event automatically. — Sebastian Simon
– Sebastian Simon, Commented Aug 30, 2018 at 9:22

pid · Accepted Answer · 2018-08-30 17:35:10Z

5

The line:

picture[i].addEventListener('click', tablePush());
                                              ^^

does not add the function tablePush, but the result of the invocation of tablePush(). This is so, because the parens () at the end mean "invoke this function now". To correct your code, use:

picture[i].addEventListener('click', tablePush);
                                              ^ no parens

edited Aug 30, 2018 at 17:35

answered Aug 30, 2018 at 9:16

pid

11.6k6 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikhil Aggarwal · Accepted Answer · 2018-08-30 09:15:52Z

3

You are calling the function while adding event listener.

You need to update from

picture[i].addEventListener('click', tablePush());

to

picture[i].addEventListener('click', tablePush);

edited Aug 30, 2018 at 9:15

answered Aug 30, 2018 at 9:15

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Comments

Maor Refaeli · Accepted Answer · 2018-08-30 09:16:16Z

2

You are calling it.
You need to register the function tablePush (instead of invoking it):

picture[i].addEventListener('click', tablePush);

answered Aug 30, 2018 at 9:16

Maor Refaeli

2,5372 gold badges21 silver badges34 bronze badges

Collectives™ on Stack Overflow

My JavaScript function runs without being called [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related