Verwenden eines Ereignis-Listeners für zwei Objekte

Question

Ich versuche, ein sehr einfaches Formular zu erstellen. Mein Ziel ist es, zwei anklickbare Schaltflächen zu erstellen, die jeweils eine Frage enthalten. Wenn Sie darauf klicken, gibt das DOM die Antwort unter jeder Taste aus. Der schwierige Teil besteht darin, beide Tasten mit nur einem "addEventListener" zu beantworten. Hier ist mein Code:

HTML:

<div id="wrapper"> 
    <header> 
     <h1>Have you ever wondered...</h1> 
    </header> 
    <div> 
     <button id="myBtn">How many licks it takes to get to the center of a tootsie pop?</button> 

     <p id="first"></p> 

     <h3>Or what about...</h3> 

     <button id="myBtnTwo">How tall the Eiffel Tower is?</button> 

     <p id="second"></p> 

    </div> 
</div> 

JS:

document.getElementById("myBtn").addEventListener("click", function(){ 
    document.getElementById("first").innerHTML= "Approximately 364 licks!";  

    }); 

document.getElementById("myBtnTwo").addEventListener("click", function(){ 
    document.getElementById("second").innerHTML= "984 feet!"; 
}); 

Vielen Dank im Voraus!

Answer 1

Sie können nur ein Element an jeden Ereignislistener in JS binden. Sie können jedoch mehrere verschiedene Ereignisse mit einem Element verknüpfen.

Nun, um Ihre Frage zu lösen: Eine Möglichkeit, diese Situation zu beheben, besteht darin, den Ereignishandler an das Elternelement anzuhängen und dann das Element zu finden, das das Ziel des Ereignisses war.

<div id="wrapper"> 
    <header> 
    <h1>Have you ever wondered...</h1> 
    </header> 
<div id="btn-wrapper"> 
    <button id="myBtn">How many licks it takes to get to the center of a tootsie pop?</button> 
    <p id="first"></p> 
    <h3>Or what about...</h3> 
    <button id="myBtnTwo">How tall the Eiffel Tower is?</button> 
    <p id="second"></p> 
</div> 

Wie Sie sehen können, habe ich die ID btn-wrapper an die Mutter div. Und dann habe ich im JS den Handler an dieses Elternelement angehängt. Dann können Sie das Ereignisziel finden und Ihren Code entsprechend ausführen.

var theParent = document.querySelector("#btn-wrapper"); 
theParent.addEventListener("click", doSomething, false); 

function doSomething(e) { 
    if (e.target !== e.currentTarget) { 
      if (e.target === document.querySelector('#myBtn')) { 
     document.querySelector("#first").innerHTML= "Approximately 364 licks!"; 
     } else if (e.target === document.querySelector('#myBtnTwo')) { 
     document.querySelector("#second").innerHTML= "984 feet!"; 
     } 
    } 
    e.stopPropagation(); 
} 

einige mehr auf dem Thema zu lesen: https://www.kirupa.com/html5/handling_events_for_many_elements.htm