how to replace $(document).ready with normal Javascript functions/conventions?

so I have the following code

    $(document).ready(function(){
        //enable submit button once user makes a radio button selection
        if (document.querySelector('input[name="benefitType"]')) {
            document.querySelectorAll('input[name="benefitType"]').forEach((elem, i) => {
                elem.addEventListener("change", function(event) {
                    document.querySelector('#benefit-quote-submit').disabled = false;
                });
            });
        }

basically, I am enabling the submit button (of type <button) when one of the radio buttons in the form is selected.

I want to replace $(document).ready with normal Javascript equivalents.

I tried

if(document.readyState === 'ready' || document.readyState === 'complete') {
  doSomething();

but it's not working (when I said it's not working, my breakpoint on this line "elem.addEventListener" is not breaking the execution. It works fine though with $(document).ready.

Thank you.

So you want to do some action when the website is loaded.

You can use the onload event on the body:

document.body.onload = () => doSomething();

Or you can achieve the same by adding an event listener:

document.body.addEventListener("DOMContentLoaded", () => doSomething());

I hope this helps!

The document/DOM is ready when the DOMContentLoded event happens on the document.

So here is a complete example of how the button can be enabled when the form is valid. There is no reason to have event listeners on each input. When something happens in the form you can just test using checkValidity() on the form.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.addEventListener('DOMContentLoaded', e => {
  // event listener for submitting the form
  document.forms.form01.addEventListener('submit', e => {
    e.preventDefault();
    console.log('You selected:', e.target.benefitType.value);
  });
  // When something has changed in the form
  // test if valid and change button
  document.forms.form01.addEventListener('input', e => {
    if(e.target.form.checkValidity()){
      e.target.form.sumitbtn.disabled = false;
    }
  });
  document.forms.form01.addEventListener('change', e => {
    if(e.target.form.checkValidity()){
      e.target.form.sumitbtn.disabled = false;
    }
  });
});

<!-- language: lang-html -->

<form name="form01">
  <label>X<input type="radio" name="benefitType" value="x" required></label>
  <label>Y<input type="radio" name="benefitType" value="y"></label>
  <label>Z<input type="radio" name="benefitType" value="z"></label>
  <button name="sumitbtn" disabled>Submit</button>
</form>

<!-- end snippet -->