JS not working on a web page

[dzoladz]

Hey All, I have some JS code I added to a JS file and linked it to the base.html. The JS code works correctly in Visual Studio. I know it is linked correctly because when I console.log the variables they show up. The issue is the variables in the console.log show up null or undefined. If the variables are null, obviously the script won't function. I've looked at other posts and followed their recommendations with no luck. Any recommendations would be helpful.

window.addEventListener('load', function () {
let questionInputs = document.querySelectorAll('input[type="radio"]');
let imgCheckImg = document.querySelector('.img_check');
let currentForm = document.querySelector('form');
console.log(currentForm);
console.log(questionInputs);
console.log(imgCheckImg);

if (questionInputs.length > 0) {
questionInputs.forEach(questionInput => {
// Listen to changes of every inputs once
questionInput.addEventListener('change', () => {
if (questionInput.checked) {
const imageCheck = questionInput.closest('.hs-form-field').previousElementSibling.querySelector('.img_check')
if (imageCheck) {
// Add class to show check mark
imageCheck.classList.add('img_check--visible');
imageCheck.classList.remove('img_check');
}
}
}, {once: true});
});
}
});

[dzoladz]

@alyssamwilie , that did it! Thank you!

[alyssamwilie · Accepted solution]

You'll want to use the global form event listener then. HubSpot forms are built with JavaScript so they often aren't completely loaded in when the window itself is considered loaded.

window.addEventListener('message', event => {
  // check that form is fully loaded using onFormReady -->
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
    let questionInputs = document.querySelectorAll('input[type="radio"]');
    let imgCheckImg = document.querySelector('.img_check');
    // select the form by it's id using event.data.id
    let currentForm = document.querySelector('form[data-form-id="'+event.data.id);
    console.log(currentForm);
    console.log(questionInputs);
    console.log(imgCheckImg);


    if (questionInputs.length > 0) {
      questionInputs.forEach(questionInput => {
        // Listen to changes of every inputs once
        questionInput.addEventListener('change', () => {
          if (questionInput.checked) {
            const imageCheck = questionInput.closest('.hs-form-field').previousElementSibling.querySelector('.img_check')
            
            if (imageCheck) {
              // Add class to show check mark
              imageCheck.classList.add('img_check--visible');
              imageCheck.classList.remove('img_check');
            }
          }
        }, {once: true});
      });
    }
  }
});

[alyssamwilie]

Is this code for an HTML form or a HubSpot form?

[dzoladz]

Hi @alyssamwilie, it's for a HubSpot form