CODEWITHSUNDEEP
javascripthtmlarraysreplacestyles
Marusia Petrova
Marusia Petrova

Reputation: 27

Java Script - Give certain array elements different colour

I am trying to do something with JS but as per usual arrays prove to be the bane of my existence...

I have to loop through the numbers from 1 to 100 and print them in the HTML, every number that divides by 3 should show in the colour red while all other numbers should be black. I tried so many things and tried to find how to do it but could not figure it out. Could anyone, please, tell me what is the proper way to do it?

Upvotes: 0

Views: 45

Answers (3)

Jack Bashford
Jack Bashford

Reputation: 44087

First, loop through the numbers 1 to 100:

for (var i = 1; i <= 100; i++) {
    //Stuff will go here
}

Then, write the number i to HTML:

document.write(i);

Finally, add the if statement:

if (i % 3) {
    document.write(i);
} else {
    document.write("THREE");
}

Full code:

for (var i = 1; i <= 100; i++) {
  if (i % 3) {
    document.write(i + "<br>");
  } else {
    document.write("THREE<br>");
  }
}

EDIT

Here's how you'd make THREE red:

for (var i = 1; i <= 100; i++) {
  if (i % 3) {
    document.write(i + "<br>");
  } else {
    document.write("<span style='color: red;'>THREE</span><br>");
  }
}

Upvotes: 0

Guillaume Ongenae
Guillaume Ongenae

Reputation: 66

Put the THREE in some inline element and add css rule to change the color. For printing the list the solution explained by Jack. (Did it differently because I could.)

const text = (new Array(100))
	.fill('')
	.map((_v, i) => (i % 3) === 0 ? `<b>THREE</b>` : i)
	.join('<br/>');

document.write(`<p>${text}</p>`)
b {
  color: red;
}

Upvotes: 0

Web Nexus
Web Nexus

Reputation: 1158

You can use the following code to get what you are looking for.

for (let i = 1; i < 101; i++) {
    if(i % 3 == 0) {
       console.log('THREE');
    } else {
       console.log(i)
    }

}

If you need to write the values to a document, change the console.log to document.write

Upvotes: 1

Related Questions