How to change color of element in array?

JavaScript
1

Hello I would like to know if there is a simple way to change the color of text in the second element of the array(“orange”) to red ?
html

<p>List all array items, with keys and values:</p>

<p id="demo"></p>

js

var fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

function myFunction(item, index) {
  document.getElementById("demo").innerHTML += index + ":" + item + "<br>"; 
}
2

For HTML/CSS the content of your p is a bunch of text divided by some spaces, it’s really hard to style and select some portion of it.

What you can do however, is to add some span with specific css while looping, for example:

function myFunction(item, index) {
  const className = index % 2 === 0 ? 'even': 'odd';
  document.getElementById("demo").innerHTML += index + ": <span class="+className+">item</span> + "<br>"; 
}

So that you end up with a bunch of

<span class="even">...</span>
<span class="odd">...</span>

However this is a poor design imho, usually, when you want to make a list you should rely on the li html element, with that you have way more freedom and option to use CSS selectors :slight_smile:

Hope this helps :+1: