CMS Development

dzoladz
Participante | Parceiro Platinum
Participante | Parceiro Platinum

JS not working on a web page

resolver

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 Avaliação positiva
1 Solução aceita
alyssamwilie
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

JS not working on a web page

resolver

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.

Exibir solução no post original

0 Avaliação positiva
4 Respostas 4
dzoladz
Participante | Parceiro Platinum
Participante | Parceiro Platinum

JS not working on a web page

resolver

@alyssamwilie , that did it! Thank you!

0 Avaliação positiva
alyssamwilie
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

JS not working on a web page

resolver

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 Avaliação positiva
alyssamwilie
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

JS not working on a web page

resolver

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 Avaliação positiva
dzoladz
Participante | Parceiro Platinum
Participante | Parceiro Platinum

JS not working on a web page

resolver

Hi @alyssamwilie, it's for a HubSpot form

0 Avaliação positiva