How do I change the style of a character in an array?

Question

I have a div#effect in my HTML which of the text inside is written from the JavaScript I've put here,

I want to change the color of character "D" displayed in the div to be another color, I can refer to that character, console.log it or even alert it, but as soon as I want to set the style.color of it to say red, an undefined err pops,

how can I change the color of that specific character to another color?

let x = 0;
let textEffect = "Hi, \n I'm Dorothy, \n\ have a great day!".split('');
let container = document.getElementById("effect");

function animate() {
    if(x < textEffect.length){
        container.innerHTML += textEffect[x];
        x++;
        setTimeout(animate, 80);
    }  // here is the error : document.getElementById('effect').innerHTML.charAt(10).style.color = "red"
}
animate();

#effect {
  font-size: 2rem;
  font-weight: bold;
  line-height: 2rem;
  font-family: "Archivo Black", sans-serif;
  color: #e2e2e2;
  text-shadow: 1px 1px 10px #333333;
  height: 220px;
}

<div id="effect" style="white-space: pre-line;"></div>

<!-- begin snippet: js hide: false console: true babel: false -->

You can only set the style of an element, not an individual character. If you want to color your characters you have to wrap them in <span>s. — user5734311
– user5734311, Commented Apr 23, 2021 at 8:03
Here's fixed code (also addressing your previous question): jsfiddle.net/co8sphe9 (also, when you want to know how to do something, try googling it: "js create element" should lead to lots of existing answers) — user5734311
– user5734311, Commented Apr 23, 2021 at 8:10

Fabrizio Calderan · Accepted Answer · 2021-04-23 08:38:13Z

document.getElementById('effect').innerHTML.charAt(10) will return a string and not a node object, so you can't apply a style method to this element

You need to wrap the 10^th character of the string inside a span element

let x = 0;
let textEffect = "Hi, \n I'm Dorothy, \n\ have a great day!".split('');
let container = document.getElementById("effect");

function animate() {
    if (x < textEffect.length){
        if (x === 10) {
          container.innerHTML += '<span>' + textEffect[x] + '</span>';        
        }
        else {
          container.innerHTML += textEffect[x];
        }
        x++;
        setTimeout(animate, 80);
    } 
}
animate();

#effect {
  font-size: 2rem;
  font-weight: bold;
  line-height: 2rem;
  font-family: "Archivo Black", sans-serif;
  color: #e2e2e2;
  text-shadow: 1px 1px 10px #333333;
  height: 220px;
}

span {
 color: red 
}

<div id="effect" style="white-space: pre-line;"></div>

<!-- begin snippet: js hide: false console: true babel: false -->

Collectives™ on Stack Overflow

How do I change the style of a character in an array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related