バニラジャバスクリプトのイベントリスナーで重複を防ぐにはどうすればよいですか？

Question

何らかの理由で、カテゴリが選択されるたびに1の重複量が表示されます。 oneBtnがクリックされた場合は、1回のクリックでテキストフィールドに1つだけ追加されます。言い換えると、カテゴリが変更されるたびに（thisOneまたはthatOne）、oneBtnがクリックされたときに別の1が張られます。カテゴリが2回変更された場合、oneBtnはクリックごとに11を入力します。私はなぜこれが起こっているのか、それがバニラの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; 
 
     \t }; changeHeader(); 
 

 
    /*FUNCTION TO ADD 1 TO TEXTFIELD*/ 
 
     let addInput = (x) => { 
 
     inputText.value += x.target.innerHTML; 
 
     \t } 
 
    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

あなたはoneBtnに他のEventListenerを添付thisOne thatOneをクリックするたびに。したがって、すべてのeventListenerは順番に実行されます。

addOne関数の外部でeventListenerを移動すると、期待通りに動作するはずです。