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?
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?
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.
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");
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: [<] .
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.
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.