CMS Development

dzoladz
Participant | Partenaire solutions Platinum
Participant | Partenaire solutions Platinum

JS not working on a web page

Résolue

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 Votes
1 Solution acceptée
amwilie
Solution
Conseiller clé | Partenaire solutions Elite
Conseiller clé | Partenaire solutions Elite

JS not working on a web page

Résolue

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 Developer at Lynton

Learn HubL | Get Marketing Insights

Voir la solution dans l'envoi d'origine

0 Votes
4 Réponses
dzoladz
Participant | Partenaire solutions Platinum
Participant | Partenaire solutions Platinum

JS not working on a web page

Résolue

@amwilie , that did it! Thank you!

0 Votes
amwilie
Solution
Conseiller clé | Partenaire solutions Elite
Conseiller clé | Partenaire solutions Elite

JS not working on a web page

Résolue

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 Developer at Lynton

Learn HubL | Get Marketing Insights

0 Votes
amwilie
Conseiller clé | Partenaire solutions Elite
Conseiller clé | Partenaire solutions Elite

JS not working on a web page

Résolue

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 Developer at Lynton

Learn HubL | Get Marketing Insights

0 Votes
dzoladz
Participant | Partenaire solutions Platinum
Participant | Partenaire solutions Platinum

JS not working on a web page

Résolue

Hi @amwilie, it's for a HubSpot form

0 Votes