topic Re: JS not working on a web page in CMS Development

JS not working on a web page

dzoladz — Wed, 25 Jan 2023 22:40:46 GMT

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

Re: JS not working on a web page

alyssamwilie — Thu, 26 Jan 2023 13:53:42 GMT

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

Re: JS not working on a web page

dzoladz — Thu, 26 Jan 2023 13:57:05 GMT

Hi @alyssamwilie, it's for a HubSpot form

Re: JS not working on a web page

alyssamwilie — Thu, 26 Jan 2023 14:05:19 GMT

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.

Re: JS not working on a web page

dzoladz — Thu, 26 Jan 2023 14:13:43 GMT

@alyssamwilie , that did it! Thank you!