Wie kann ich die Duplizierung in Ereignis-Listener in Vanille-JavaScript verhindern?

Question

Aus irgendeinem Grund verdoppelt sich die Anzahl der Duplikate jedes Mal, wenn eine Kategorie ausgewählt wird. Wenn auf oneBtn geklickt wird, möchte ich nur eine einzige 1 pro Textfeld zum Textfeld hinzufügen. Mit anderen Worten, für jedes Mal, wenn die Kategorie geändert wird (thisOne oder thatOne), wird beim Klicken auf oneBtn eine weitere 1 aufgereiht. Wenn also die Kategorie zweimal geändert wird, gibt der oneBtn 11 pro Klick ein. Ich würde gerne verstehen, warum das passiert und wenn es in Vanilla js behoben werden kann.

Meine Vermutung ist, dass es irgendwo eine Anzahl von Klicks gibt, die gespeichert werden und vielleicht ist das was das Ergebnis beeinflusst. Wenn das wahr ist, gibt es eine Möglichkeit, diese Zählung für jedes Mal, wenn eine Kategorie geändert wird, auf Null zurückzusetzen, um die Duplizierung zu verhindern? Ich bin vielleicht weit weg, ich rate nur hier.

/*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

Jedes Mal, wenn Sie auf ThisOne Thatone klicken befestigen Sie eine andere eventlistener zum oneBtn. So werden alle EventListener nacheinander ausgeführt.

Verschieben Sie den EventListener außerhalb der AddOne-Funktion und es sollte wie erwartet funktionieren.