Problem with Javascript file

SOLVE
IAM
Contributor | Partner
Contributor | Partner

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!

 

1 Accepted solution

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

@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 😄


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

 

Drop by and say Hi to me on slack.

View solution in original post

0 Upvotes
4 Replies 4
tjoyce
Recognized Expert | Platinum Partner

@IAM - Do you have a preview link?

0 Upvotes
IAM
Contributor | Partner
Contributor | Partner

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.

tjoyce
Solution
Recognized Expert | Platinum Partner

@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 😄


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

 

Drop by and say Hi to me on slack.

View solution in original post

0 Upvotes
IAM
Contributor | Partner
Contributor | Partner

Thank you! Moving the script worked.