CMS Development

dzoladz
Participant | Platinum Partner
Participant | Platinum Partner

JS not working on a web page

SOLVE

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});
});
}
});

0 Upvotes
1 Accepted solution
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

JS not working on a web page

SOLVE

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});
      });
    }
  }
});

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

View solution in original post

0 Upvotes
4 Replies 4
dzoladz
Participant | Platinum Partner
Participant | Platinum Partner

JS not working on a web page

SOLVE

@alyssamwilie , that did it! Thank you!

0 Upvotes
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

JS not working on a web page

SOLVE

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});
      });
    }
  }
});

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Upvotes
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

JS not working on a web page

SOLVE

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

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Upvotes
dzoladz
Participant | Platinum Partner
Participant | Platinum Partner

JS not working on a web page

SOLVE

Hi @alyssamwilie, it's for a HubSpot form

0 Upvotes