I am trying to do this tutorial on a Wordpress site, and I’m getting an error on let spanElements = element.querySelectorAll(“span”);. Console says "null is not an object (evaluating ‘element.querySelectorAll’)
Any suggestions? There are no iFrames that I know of.
Here is a link to the site: https://www.hipidipi.com
On the home page, in the hero area just below the main menu, I want to apply this to LIVE YOUR BEST LIFE.
All of the characters are enclosed in span tags.
I will take a deeper look at this tomorrow, but where are you defining element? If you check for element in the console, do you see null?
Yeah there’s no element defined (I didn’t look at the source)…
Also if you copy Matthew’s QSA and use it in the console it comes up with illegal character, I think this is the quotation marks being 66 and 99 
I don’t even have anything other than "" on my keyboard so IDK how to even get “” without copying …
It takes me back to the chalkboard in primary school…
this works:
spanElements = document.querySelectorAll("span");
You should have looked at the source then, because the actual code is this:
let spanElements = element.querySelectorAll(“span”);
There is no illegal character.
Steve is referring to the “smart quotes”. In JavaScript, those can sneak in by the operating system automatically turning the " character into “ ” characters for the opening/closing quotes! 
Where you able to resolve it by using Steve’s suggestion to use document.querySelectorAll?
Cheers,
Kirupa
I figured out the problem partially.
Each of the words “LIVE” “YOUR” “BEST” “LIFE” is in its own h2, and they are all assigned as a ‘.message’ class.
The problem was on this line: let message = document.querySelector(".message");
I was missing the period before message to define it as a class.
I chose to do this because I wanted this script to affect all h2s with a class of ‘message’.
Once I fixed the element by making it ‘.message’ the first of the h2s, is working, but not the others. They all have a class of ‘message’. What am I missing?
I think that the smart quotes came from copying my comment from YouTube.
Also, is there a way to add more colors to the mix? It looks like I am just getting red, blue and colors in between, purples. I’m not getting the same effect as in your video on YouTube.
You should use querySelectorAll to find all instances of that element. The querySelector call will only return the first element it finds 
Keep in mind that querySelectorAll will return a collection of elements that you will need to loop through to access each individual element.
As for the color, do you have a smaller reproduction that isn’t integrated with Wordpress? That will make it easier to isolate what is your code and what may be interference from Wordpress itself.
Cheers,
Kirupa
This is what I have had in place:
let spanElements = element.querySelectorAll(“span”);
If I change:
let message = document.querySelector(".message");
to:
let message = document.querySelectorAll(".message");
it breaks it.
That is expected. The reason is that querySelector gives you a single message element. With querySelectorAll, you get a collection of messages 
This article goes into more detail on how to handle a collection of elements:
In general, you’ll need some code that looks a bit like follows:
let messages = document.querySelectorAll(".message");
for (let i = 0; i < messages.length; i++) {
let message = messages[i];
// do something with the individual message
}
I will have to explore making that happen later. I’m a designer, not a coder. I understand the basics of js, but that’s all a bit over my head.
For now, I’ve just gone back to a single h2 with an id instead of a class. All of the characters animate now, but I’m still having trouble getting the random color aspect to function. I’m fairly certain that it’s just not loading in the right order.
I’d say you are much closer to having a lot of this figured out! I’d say take about an hour and just browse the articles (or watch the videos) here on the DOM: JavaScript 101 | KIRUPA
The wall you are hitting is one you can break through once you connect the remaining dots! For your random color question, share the relevant code (not inside your wordpress site) that we can look at. A good place to create a targeted repro/example is https://www.codepen.io
I’ve been trying to get your randomColor.js file to work properly all day, and it’s just not working with WordPress. I’ve tried loading it in different places to no avail.
I just tried copying and pasting it into a custom code area for Elementor, and I may have found the issue…
toward the bottom of your script is this line:
for (let i = 0; i < 6; i++) {
The custom code area is saying there’s an error there. "Special characters must be escaped: [<] .
If I wrap that script in tags, I get a whole other set of warnings, most of them saying to use Mozilla JS extensions.
You need to wrap them in a script tag. Otherwise, the browser won’t know to run the code as opposed to just displaying the code as-is. That is why the special character warning came in.
As for the warning, you should be able to safely ignore it. Outside of that warning, does your code work?
Yes, I knew that I need to wrap them in script tags, but in Wordpress/Elementor there are some ways of integrating scripts in which you can’t use the script tags. Removing them was purely experimental to see if that was potentially causing a problem.
I have the scripts working in both Chrome and Firefox, but they will not work in Safari. In Safari, the randomColor.js script will not work. One thing I see happening in all three browsers is that the script does not activate until I move my mouse over the page. If I hit reload with my mouse cursor not over the page, the text stays white until I mouse over.
Does your animation work outside of Wordpress? Or does it only not work when you add it to Wordpress?
It’s a WordPress problem. The scripts work fine in Safari, Chrome, and Firefox when it’s a simple HTML page.
The script from your tutorial video works in Safari on the WordPress site, but for some reason the randomColor.js script is not triggered.