Better way to query and pass the elements to conditional operator in Javascript I have the following function which has the required functionality. Is there any way that I can reduce the code but have the same functionality?

addClickEventListeners = () =&gt; {
  let multipleChoiceQuestionButtons = document.querySelectorAll('[name="multiple_choice"]');
  let trueFalseQuestionButtons = document.querySelectorAll('[name="true_false"]');
  let multipleChoiceMultiAnswersQuestionButtons = document.querySelectorAll('[name="multi_answers"]');
  if (multipleChoiceQuestionButtons.length &gt; 0) {
    multipleChoiceQuestionButtons.forEach((button) =&gt; {
      button.addEventListener('click', someFunction, false);
    });
  } else if (trueFalseQuestionButtons.length &gt; 0) {
    trueFalseQuestionButtons.forEach((button) =&gt; {
      button.addEventListener('click', someFunction, false);
    });
  } else if (multipleChoiceMultiAnswersQuestionButtons.length &gt; 0) {
    multipleChoiceMultiAnswersQuestionButtons.forEach((button) =&gt; {
      button.addEventListener('click', someFunction, false);
    });
  }
};
Interesting question;

You can make this code slightly less efficient (however, the user will never notice), and so we can just attach listeners to everything.

const addClickEventListeners = () =&gt; {

  const addListener = (button) =&gt; button.addEventListener('click', someFunction, false);

  document.querySelectorAll('[name="multiple_choice"]').forEach(addListener);
  document.querySelectorAll('[name="true_false"]').forEach(addListener); 
  document.querySelectorAll('[name="multi_answers"]').forEach(addListener); 

};


This should behave the same way as far as I can tell.

You could also create your buttons that require someFunction with a css class dedicated for that selection or even better with a data attribute for that purpose. Then you just query on that and attach the listener.