Better way to query and pass the elements to conditional operator in Javascript

Question

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 = () => {
  let multipleChoiceQuestionButtons = document.querySelectorAll('[name="multiple_choice"]');
  let trueFalseQuestionButtons = document.querySelectorAll('[name="true_false"]');
  let multipleChoiceMultiAnswersQuestionButtons = document.querySelectorAll('[name="multi_answers"]');
  if (multipleChoiceQuestionButtons.length > 0) {
    multipleChoiceQuestionButtons.forEach((button) => {
      button.addEventListener('click', someFunction, false);
    });
  } else if (trueFalseQuestionButtons.length > 0) {
    trueFalseQuestionButtons.forEach((button) => {
      button.addEventListener('click', someFunction, false);
    });
  } else if (multipleChoiceMultiAnswersQuestionButtons.length > 0) {
    multipleChoiceMultiAnswersQuestionButtons.forEach((button) => {
      button.addEventListener('click', someFunction, false);
    });
  }
};

Answer 1

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 = () => {

  const addListener = (button) => 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.