Problem with Javascript file

Developer Support CMS Development
1

I am trying to implement a javascript file connected with a Hubspot template. There is an error when I inspect the code:

Uncaught TypeError: Cannot read property ‘style’ of undefined
at Rotating_text.js:5

I can’t seem to get the movement to work, rotating text.

Here is the full javascript code I found from Code Pen and what I am trying to mimic:

https://codepen.io/rachsmith/pen/BNKJme

var words = document.getElementsByClassName(“word”);
var wordArray = [];
var currentWord = 0;

words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
splitLetters(words[i]);
}

function changeWord() {
var cw = wordArray[currentWord];
var nw =
currentWord == words.length - 1 ? wordArray[0] : wordArray[currentWord + 1];
for (var i = 0; i < cw.length; i++) {
animateLetterOut(cw, i);
}

for (var i = 0; i < nw.length; i++) {
nw[i].className = “letter behind”;
nw[0].parentElement.style.opacity = 1;
animateLetterIn(nw, i);
}

currentWord = currentWord == wordArray.length - 1 ? 0 : currentWord + 1;
}

function animateLetterOut(cw, i) {
setTimeout(function() {
cw[i].className = “letter out”;
}, i * 80);
}

function animateLetterIn(nw, i) {
setTimeout(function() {
nw[i].className = “letter in”;
}, 340 + i * 80);
}

function splitLetters(word) {
var content = word.innerHTML;
word.innerHTML = “”;
var letters = [];
for (var i = 0; i < content.length; i++) {
var letter = document.createElement(“span”);
letter.className = “letter”;
letter.innerHTML = content.charAt(i);
word.appendChild(letter);
letters.push(letter);
}

wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 4000);

Thanks for any help in advance as I don’t know a ton about javascript!

2

@IAM - Do you have a preview link?

3

Yes! https://www.inneractionmedia.com/test?hs_preview=bFWqveQf-6044383081

It is at the top of the page that says “You want more customers.” The word customers should rotate with other words.

4

@IAM -

You need to move the script to the bottom of the page just before the closing </body> tag. You’re trying to access style properties of an element that doesn’t exist yet, because the element isn’t on the page. Moving the js to the bottom, will ensure the elements are in the DOM (unless the element is built dynamically, but I don’t think it is)

If this answer helped, please, mark as solved :grinning_face_with_smiling_eyes:

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

5

Thank you! Moving the script worked.