CMS Development

dzoladz
Member

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
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | 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

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

View solution in original post

0 Upvotes
4 Replies 4
dzoladz
Member

JS not working on a web page

SOLVE

@amwilie , that did it! Thank you!

0 Upvotes
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | 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

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

0 Upvotes
amwilie
Key Advisor | Elite Partner
Key Advisor | 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

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

0 Upvotes
dzoladz
Member

JS not working on a web page

SOLVE

Hi @amwilie, it's for a HubSpot form

0 Upvotes