0

Here is some sample code of a ton of the exact same function in the project.

$('#psi').on('change', function() {
  if($(this).is(":checked")) {
    $('.psiOptions').removeClass('hidden-1');
  } else {
    $('.psiOptions').addClass('hidden-1');
  }
});

I'm trying to upgrade this to not rely on JQuery. What is the most correct way to do this in Vanilla JS besides assigning onclick="someFunction()" 20 different times for 20 different cases?

Seltonu
  • 95
  • 1
  • 9
  • 2
    [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) is the way to go, but you can't avoid the loop (jQuery does it under the hood too). – Teemu Dec 07 '21 at 19:48
  • 2
    The most correct would be using [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) so you only set one event handler for all elements to share. But if you want to mimic jQuery then just a `forEach` or a loop with `.addEventListener("change", )` – VLAZ Dec 07 '21 at 19:49

0 Answers0