addEventListener 使用每次点击而不是按钮点击

Question

我想写一个代码，当我点击一个按钮时，它会在我的本地存储中存储一些信息。本地存储的功能工作正常，但事件侦听器没有。单击事件不是指按钮。它指的是每次点击。

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

Answer 1

在加载时使用函数而不是调用事件，例如：

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>

正如您在下面的示例中看到的，该函数将在没有点击的情况下调用

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>

Answer 2

您应该添加对该方法的引用。因为否则点击只会执行 zumWarenkorbHinzufuegen 返回的内容。

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 使用每次点击而不是按钮点击

addEventListener uses every click instead of button click

html

javascript

local-storage