Need help changing jquery to javascript for an on change function-CodePudding

I am trying to change some jQuery code to plain JS for an on call function. I keep getting the following error - Failed to execute 'addEventListener' on 'EventTarget': parameter 2 is not of type 'Object'.

Old

$(document).on('change', '.js-variant-radio', onVariantRadioChange);

New

document.querySelector('.js-variant-radio').addEventListener("change", onVariantRadioChange);

Complete code block here

(function(){
  //START QUANTITY INPUT VALIDATION FUNCTION
  let
    onVariantRadioChange = function(event) {
      let
        $radio = document.querySelector(this),
        $form = $radio.closest('form'),
        max = $radio.attr('data-inventory-quantity'),
        $quantity = $form.querySelector('.js-quantity-field'),
        $addToCartButton = $form.querySelector('.add-to-cart-button');

      if($addToCartButton.prop('disabled') === true) {
        $addToCartButton.prop('disabled', false);
      }

      $quantity.attr('max', max);

      if (parseInt($quantity.value) > max) {
        $quantity.val(max).change();
      }
    };

    //END QUANTITY INPUT VALIDATION FUNCTION
})();

CodePudding user response：

Here is your code in vanillaJS. The only thing I didn't do is mimic the change() trigger that was appended

document.addEventListener('DOMContentLoaded', () => {
  let
    onVariantRadioChange = function(event) {
      let
        $radio = event.target,
        $form = $radio.closest('form'),
        max = $radio.dataset['inventory-quantity'],
        $quantity = $form.querySelector('.js-quantity-field'),
        $addToCartButton = $form.querySelector('.add-to-cart-button');

      if ($addToCartButton.getAttribute('disabled')) {
        $addToCartButton.removeAttribute('disabled');
      }

      $quantity.setAttribute('max', max);

      if (parseInt($quantity.value) > max) {
        $quantity.value = max;
      }
    };

  document.querySelectorAll('.js-variant-radio').foreach(el => el.addEventListener("change", onVariantRadioChange));
})

CodePudding user response：

You're still adding the event listener with jQuery. Try changing it to:

const jsVariantRadios = document.getElementsByClassName('.js-variant-radio');

jsVariantRadios.addEventListener('change', onVariantRadioChange);