anyway to condense this? trying to make a multiple choice questions

Question

btnA.addEventListener('click', function() {
    console.log("Answer choice: A")
    answerSelected = choiceA.textContent;
    checkAnswer(answerSelected);
})
btnB.addEventListener('click', function() {
    console.log("Answer choice: B")
    answerSelected = choiceB.textContent;
    checkAnswer(answerSelected);
})
btnC.addEventListener('click', function() {
    console.log("Answer choice: C")
    answerSelected = choiceC.textContent;
    checkAnswer(answerSelected);
})
btnD.addEventListener('click', function() {
    console.log("Answer choice: D")
    answerSelected = choiceD.textContent;
    checkAnswer(answerSelected);
})

how would i condense this so that its only one "function"? still new to javascript https://github.com/rahimh5/Zuhair-Problem

Please add the relevant HTML to the question instead of linking to your github repo — DarkBee, Nov 25 '22 at 08:07
Yes, use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). — Teemu, Nov 25 '22 at 08:07
@AllanWind I doubt that, just trying to get some insight. Not throwing rocks, problems can have different solutions — DarkBee, Nov 25 '22 at 08:09
(Reposting to fix typo): Use a loop, extract what is different to an array [[btnA, "A", choiceA], ... ] — Allan Wind, Nov 25 '22 at 08:18
Please provide enough code so others can better understand or reproduce the problem. — Community, Nov 25 '22 at 09:40

score 0 · Answer 1 · answered Nov 25 '22 at 08:58

as per @Teemu's suggestion, you can use event delegation. when the parent element is click, find its target

document.getElementById("choices").addEventListener("click", function (e) {
  if (e.target && e.target.nodeName == "BUTTON") {
    console.log(e.target.innerHTML)
  }
});

<div id="choices" class="choices">
  <button name="btnA">A</button>
  <button name="btnB">B</button>
  <button name="btnC">C</button>
  <button name="btnD">D</button>
</div>

Carsten Massmann · Answer 2 · 2022-11-25T11:08:33.773

Here is a rewrite of your complete quiz app.

As suggested in the comments I used event delegation for the click event (answers.onclick=ev=>{ ... })

const questions = [{id: 0,question: "6 x 6",ans: "36",A: "48",B: "36",C: "38",D: "26"},{id: 1,question: "3 x 8",ans: "24",A: "28",B: "26",C: "22",D: "24"},{id: 2,question: "4 x 12",ans: "48",A: "60",B: "52",C: "48",D: "36"},{id: 3,question: "1 x 3",ans: "3",A: "5",B: "1",C: "4",D: "3"},{id: 4,question: "6 x 3",ans: "18",A: "18",B: "17",C: "19",D: "16"}], 
   [qdiv,btnnext,chk]=["question","next-question-btn","checker"].map(id=>document.getElementById(id)),
   answers=document.querySelector(".answer-choices"), btns=[...answers.children];
var id=0, Q; // global variables ...

btnnext.onclick=nextQ;
answers.onclick=ev=>{ // delegate click event handler for answer buttons:
 if (ev.target.textContent==Q.ans) {
  chk.textContent=`Correct - ${Q.question} = ${Q.ans}!`;
  btnnext.style.display=""
 }
 else chk.textContent="Not quite - try again!";
}

function nextQ(){
 Q=questions[id];
 chk.textContent="";
 btnnext.style.display="none";
 if (id++<questions.length){ // prepare next question
  qdiv.textContent=`What is ${Q.question}?`;
  [Q.A,Q.B,Q.C,Q.D].forEach((ans,i)=> btns[i].textContent=ans)
 }
 else { // wrap up the game:
  qdiv.textContent="Game over - thanks for playing!";
  answers.textContent=""
 }
}
nextQ(); // show initial question

<section class="container">
  <div class="title">
    <h2>Multiplication Quiz 2022</h2>
    <div class="underline"></div>
  </div>
</section>
<section class="quiz">
  <h3 id="question">Question</h3>
    <div class="question"></div>
    <div class="answer-choices">
      <button id="choice-A" class="btn A">A</button>
      <button id="choice-B" class="btn B">B</button>
      <button id="choice-C" class="btn C">C</button>
      <button id="choice-D" class="btn D">D</button>
    </div>
    <div class="checker">
      <h3 id="checker"></h3>
        <button id="next-question-btn" class="btn nextQuestion" style="display: none;">Next Question</button>
    </div>
</section>

There are many ways of doing this - and I have played around with several of them until I ended up with the above version.

anyway to condense this? trying to make a multiple choice questions

2 Answers2