addEventListener uses every click instead of button click

Question

I wanted to write a code, that stores some information in my local storage when I click on a button. The function for the local storage is working fine but the event listener doesn't. The click event is not referring to the button. It refers on every click.

        <td>
        <input type="button" value="In den Warenkorb"id="Knopfwarenkorb1">
       <script>
        const el = document.getElementById('Knopfwarenkorb1');
        el.addEventListener('click', zumWarenkorbHinzufuegen(produkt1));
       </script>
       </td>

because you are calling the function and returning what it returns to the click event listener. — epascarello, May 21 '21 at 13:00
https://stackoverflow.com/questions/10355747/onclick-event-why-javascript-runs-it-onload — epascarello, May 21 '21 at 13:02
produkt1 is a JSON of my product that belongs to the local storage when I click the button — Erbas, May 21 '21 at 13:03

score 2 · Accepted Answer · answered May 21 '21 at 13:03

Use function instead of call event on load like:

let produkt1 = 'hello';
const el = document.getElementById('Knopfwarenkorb1');
el.addEventListener('click', () => {
  zumWarenkorbHinzufuegen(produkt1)
});

function zumWarenkorbHinzufuegen(pro){
  console.log(pro);
}

<td>
  <input type="button" value="In den Warenkorb" id="Knopfwarenkorb1">
</td>

As you can see in the example below the function will call without click

let produkt1 = 'hello';
const el = document.getElementById('Knopfwarenkorb1');
el.addEventListener('click', zumWarenkorbHinzufuegen(produkt1));

function zumWarenkorbHinzufuegen(pro){
  console.log(pro);
}

<td>
  <input type="button" value="In den Warenkorb" id="Knopfwarenkorb1">
</td>

score 0 · Answer 2 · answered May 21 '21 at 13:05

You should add a reference to the method. Because otherwise the click will only execute what zumWarenkorbHinzufuegen is returning.

const el = document.getElementById('Knopfwarenkorb1');
el.addEventListener('click', knopfwarenkorb1Geclicked);

let produkt1 = {'it': 'worked'};

function knopfwarenkorb1Geclicked(event) {
  zumWarenkorbHinzufuegen(produkt1);
}

function zumWarenkorbHinzufuegen(prod1) {
  console.log(prod1);
}

<input type="button" value="In den Warenkorb" id="Knopfwarenkorb1">

addEventListener uses every click instead of button click

2 Answers2