Add colour change to text every loop - JavaScript
Question
This is literally the first time I've attempted coding - I don't even know if I will make any sense in my questions, please bear with me
Anyways, I've written a code that loops and displays an array.
Is it possible to change the colour of the text for each loop?
Thanks for the help everyone :)
<!DOCTYPE html>
<html>
<body>
<h2>Heroes & Their Ratings</h2>
<p><font color="red">This will display some superheroes and their respective ratings:</font></p>
<p id="demo"> </p>
<script> //Starts loop script
var heroes = ["Batman 3", "Superman 4", "Wonderwoman 7", "Flash 10", "Spiderman 17", "Green Lantern 18", "Bat Girl 28","Thor 23","Captain 30","Punisher 2", "Blink 1","Amber 5","Spawn 6","Dart 8", "Destiny 9","Iceman 11", "Magma 12","Dr. Fate 13","Grifter 15","Ice 14","Katana 16","KidFlash 19","Nite Owl 20","Red Arrow 21","Raven 22","V 25","Wildcat 24","Zan 25","TNT 26","Terra 27"]; //Array so heroes variable stores multiple names
var text= '';
var i = 0 //Assigns i a value of 0
for (; i < heroes.length; i++) { // loop runs for every superhero
text += heroes[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
//Ends loop script </script>
</body>
</html>
3 answers
solution1
3 ACCPTED 2017-10-25 20:14:29
Yes, there are plenty of ways. One of them is using font tag as you used before:
var heroes = ["Batman 3", "Superman 4"]; var colors = ["blue", "green"]; var text= ''; for (var i = 0; i < heroes.length; i++) { // loop runs for every superhero text += "<font color='"+colors[i]+"'>"+heroes[i] + "</font><br>"; } document.getElementById("demo").innerHTML = text;
<!DOCTYPE html> <html> <body> <h2>Heroes & Their Ratings</h2> <p><font color="red">This will display some superheroes and their respective ratings:</font></p> <p id="demo"> </p> </body> </html>
However font tag is Not Supported in HTML5 . So a better way would be:
text += "<span style='color:"+colors[i]+"'>"+heroes[i] + "</span><br>";
solution2
0 2017-10-25 20:24:27
If you are beginner I can show you easy solution for it.
var colors = ["black","red","blue"...] //make colors array and enter color values for each hero
for (var i = 0; i < heroes.length; i++) {
text += "<font color='"+ colors[i] +"'>"+ heroes[i] + "</font><br>";
}
solution3
0 2017-12-23 18:41:48
If you associate color with your hero name, then it would become simpler to identify or modify easily the name for each hero.
var heroes = [{name:"Batman 3", color:"green"}, {name: "Superman 4", color:"brown"}]; for (var i=0; i < heroes.length; i++) { document.getElementById("demo").innerHTML += "<div style='color:"+heroes[i].color+"'>" + heroes[i].name + "</div>"; }
<html> <body> <h2>Heroes & Their Ratings</h2> <p><font color="red">This will display some superheroes and their respective ratings:</font></p> <p id="demo"> </p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.