Question

由于某种原因，每次选择一个类别时，1的重复数量。如果单击oneBtn，我希望每次单击只在文本字段中添加一个1。换句话说，每次更改类别（thisOne或thatOne）时，单击oneBtn时会串起另一个1。因此，如果类别更改两次，oneBtn将每次点击输入11。我想了解为什么会发生这种情况，以及是否可以在vanilla js中解决。

我的猜测是某个地方存在点击量的存储，也许这会影响结果。如果这是真的，有没有办法在每次改变一个象征时将此计数重置为零以防止重复？我可能会离开，我只是在这里猜测。

/*GET MEAL CATEGORY ITEMS*/
  let thisOne = document.getElementById('thisOne');
  let thatOne = document.getElementById('thatOne');
  
function addOne(x){
    /*GET OPTION ITEMS*/
      let oneBtn = document.getElementById('oneBtn');
      let inputText = document.getElementById('inputText');

    /*FUNCTION TO CHANGE CATEGORY HEADER*/
      let changeHeader = () => {
        let header = document.getElementById('header');
        header.innerHTML = x.target.innerHTML;
      	}; changeHeader();

    /*FUNCTION TO ADD 1 TO TEXTFIELD*/
      let addInput = (x) => {
        inputText.value += x.target.innerHTML;
      	} 
    oneBtn.addEventListener('click', addInput);
};

thisOne.addEventListener('click', addOne);
thatOne.addEventListener('click', addOne);

<h1>Choose category</h1>
<button class="category" id="thisOne">thisOne</button>
<button class="category" id="thatOne">thatOne</button>
<br /><br />

<div>
<h3 id="header"></h3>
  <input id="inputText" type="textfield" /><br /><br />
    <button id="oneBtn">1</button>
</div>

Answer 1

每次单击thisOne thatOne时，您将另一个eventListener附加到oneBtn。所以所有的eventListener都是一个接一个地执行的。

将eventListener移到addOne函数之外，它应该按预期工作。

如何在vanilla javascript中防止事件监听器中的重复？

1 个答案: