JavaScript - How can I make it more dynamic?

Question

JavaScript

 $("#answer_a_btn").click(function() { selectAnswer("#answer_a_btn"); deselectAnswer("#answer_b_btn"); deselectAnswer("#answer_c_btn"); deselectAnswer("#answer_d_btn"); }); $("#answer_b_btn").click(function() { deselectAnswer("#answer_a_btn"); selectAnswer("#answer_b_btn"); deselectAnswer("#answer_c_btn"); deselectAnswer("#answer_d_btn"); }); $("#answer_c_btn").click(function() { deselectAnswer("#answer_a_btn"); deselectAnswer("#answer_b_btn"); selectAnswer("#answer_c_btn"); deselectAnswer("#answer_d_btn"); }); $("#answer_d_btn").click(function() { deselectAnswer("#answer_a_btn"); deselectAnswer("#answer_b_btn"); deselectAnswer("#answer_c_btn"); selectAnswer("#answer_d_btn"); });

Because I have much more than 4 Button Answers, so how can I make it more dynamic?

 function selectOnlyOneExamButton(examButtonId, examButtonsIds) { for(var i = 0; i < examButtonsIds.length; i++) { if(examButtonsIds[i] == examButtonId) { console.log("SELECTED ANSWER " + examButtonsIds[i]); selectAnswer(examButtonsIds[i]); } else { console.log("DESELECTED ANSWER " + examButtonsIds[i]); deselectAnswer(examButtonsIds[i]); } } };

de-/selectAnswer() only change the color of the current de-/selected button

I don't know why this isn't working.

He printed out the same button id everytime I clicked another button or the same button...

 var examButtonsIds = []; var examButtonId = ""; for(var i = 0; i < zwischenpruefungen[1].exams.length; i++) { currentExam = zwischenpruefungen[1].exams[i]; console.log(i); if(i % 2 == 0) { examscreen.appendChild(row); } var p = document.createElement("p"); p.className = "col-md-6"; var button = document.createElement("button"); button.id = "exam-" + currentExam.season + "-" + currentExam.year + "-btn"; button.className = "exam exam-btn btn btn-secondary btn-lg btn-block"; examButtonId = button.getAttribute("id"); button.addEventListener("click", function() { console.log("SELECT ONE EXAM BUTTON CLICKED"); selectAnswer(this); $.each(".exam-btn").not(this).each(function() { deselectAnswer(this); }); }); var span = document.createElement("span"); span.className = Object.keys(currentExam)[1]; span.textContent = currentExam["season-de"] + " "; var span2 = document.createElement("span"); span2.className = Object.keys(currentExam)[3]; span2.textContent = currentExam.year; row.appendChild(p); p.appendChild(button); button.appendChild(span); button.appendChild(span2); examButtonsIds[i] = button.getAttribute("id"); }

I do the following in my for-loop and the result is, that I get an error from jquery.min.js and the buttons keep in the clicked color if I clicked both.

Here are the new problem. I hope you can help me?

 button.addEventListener("click", function() { selectAnswer(this); $(".answer-" + letter.toLowerCase() + "-btn").not(this).each(function() { deselectAnswer(this); }); console.log(this.id); });

 button.addEventListener("click", function() { selectAnswer(this); $(".answer-a-btn").not(this).each(function() { deselectAnswer(this); }); $(".answer-b-btn").not(this).each(function() { deselectAnswer(this); }); $(".answer-c-btn").not(this).each(function() { deselectAnswer(this); }); $(".answer-d-btn").not(this).each(function() { deselectAnswer(this); }); $(".answer-e-btn").not(this).each(function() { deselectAnswer(this); }); console.log(this.id); });

I thought that it would work, but it doesn't, can anyone tell me why? I have a complex function that works, but I want it more easy....

 button.addEventListener("click", function() { selectAnswer(this); var letterTmp = this.id.split('-')[3]; $(".answer-" + letterTmp + "-btn").not(this).each(function() { deselectAnswer(this); }); console.log(this.id); });

I think this is the solution for me. :)

Answer 1

Give all the buttons the same class="answer_btn" . Then you can do

 $(".answer_btn").click(function() { select_answer(this); $(".answer_btn").not(this).each(function() { deselect_answer(this); }); });

Answer 2

        button.addEventListener("click", function() {
        selectAnswer(this);
        $(".exam-btn").not(this).each(function() {
          deselectAnswer(this);
        });
        console.log(this.id);
    });

My Solution inspired by Barmar. :)