# Animating a Random Color Change on Letters

**URL:** <https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885>\
**Category:** Uncategorized\
**Created:** [July 30, 2022, 1:50am UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885 "2022-07-30T01:50:43Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [July 30, 2022, 1:50am UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/1 "2022-07-30T01:50:43Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 30, 2022, 5:58am UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/2 "2022-07-30T05:58:39Z")

</div>

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** _?

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [July 30, 2022, 8:39am UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/3 "2022-07-30T08:39:28Z")

</div>

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");`

---

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [July 30, 2022, 5:58pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/4 "2022-07-30T17:58:12Z")

</div>

You should have looked at the source then, because the actual code is this:  
let spanElements = element.querySelectorAll(“span”);

There is no illegal character.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 30, 2022, 6:30pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/5 "2022-07-30T18:30:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [July 30, 2022, 6:34pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/6 "2022-07-30T18:34:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [July 30, 2022, 6:36pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/7 "2022-07-30T18:36:36Z")

</div>

I think that the smart quotes came from copying my comment from YouTube.

---

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [July 30, 2022, 6:40pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/8 "2022-07-30T18:40:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 30, 2022, 7:48pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/9 "2022-07-30T19:48:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [July 30, 2022, 8:12pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/10 "2022-07-30T20:12:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 30, 2022, 10:38pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/11 "2022-07-30T22:38:17Z")

</div>

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:

> **[Finding Elements In The DOM Using querySelector](https://www.kirupa.com/html5/finding_elements_dom_using_querySelector.htm)**
>
> Learn how to target elements in the DOM using just a little bit of JavaScript, the querySelector function, and an honest-to-goodness CSS selector.

In general, you’ll need some code that looks a bit like follows:

```auto
let messages = document.querySelectorAll(".message");

for (let i = 0; i < messages.length; i++) {
  let message = messages[i];
  // do something with the individual message
}

```

😃

---

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [July 30, 2022, 11:03pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/12 "2022-07-30T23:03:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 30, 2022, 11:23pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/13 "2022-07-30T23:23:47Z")

</div>

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](https://www.kirupa.com/javascript/learn_javascript.htm#theDOM)

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](https://www.codepen.io)

🙂

---

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [July 31, 2022, 12:29am UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/14 "2022-07-31T00:29:20Z")

</div>

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: [\<] .

 ![Screen Shot 2022-07-30 at 5.28.47 PM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/b/4/b4a2fa96f97bb49915ac6e299ec7f8ff7c28dabe.png)

---

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [July 31, 2022, 12:54am UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/15 "2022-07-31T00:54:02Z")

</div>

This is what i see when I mouse over the red x…

 ![Screen Shot 2022-07-30 at 5.53.08 PM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/3/8/38716637cb5d3fa7ddd1d082d574d2ecd77685f6.png)

---

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [July 31, 2022, 1:01am UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/16 "2022-07-31T01:01:26Z")

</div>

If I wrap that script in tags, I get a whole other set of warnings, most of them saying to use Mozilla JS extensions.

 ![Screen Shot 2022-07-30 at 6.02.01 PM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/9/5/95f84c267f81311163c204f07d706466f2d1a323.png)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 31, 2022, 3:31am UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/17 "2022-07-31T03:31:04Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [July 31, 2022, 8:09pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/18 "2022-07-31T20:09:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 1, 2022, 3:50am UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/19 "2022-08-01T03:50:01Z")

</div>

Does your animation work outside of Wordpress? Or does it only not work when you add it to Wordpress?

🙂

---

<div class="post-metadata">

**Author:** ![Matthew\_Seward](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matthew_seward/32/18391_2.png) [@Matthew\_Seward](https://forum.kirupa.com/u/Matthew_Seward)\
**Post date:** [August 1, 2022, 7:27pm UTC](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885/20 "2022-08-01T19:27:39Z")

</div>

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.

[Next page](https://forum.kirupa.com/t/animating-a-random-color-change-on-letters/652885.md?page=2)