Change Font Colors of specific Elements in Array - Javascript

Question

all.

I am trying to create an array where I can change the color of the fonts within them.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Array Font Colors</title>
</head>

<body>
<script type="application/javascript">
    var colors= new Array("Black", "White", "Yellow");

    for(var a=0; a<colors.length; a++){
        document.write(colors[a]+ "<br>");
        }

</script>   
</body>
</html>

The above is what I have that makes the array, and displays it. I am not sure how to change the color of each element however to its given array value. For example, since the second array element value is White, make the font color white. I am new to JavaScript and am a bit confused on how this is done.

Thank you

Tibin · Accepted Answer · 2018-02-27 05:57:55Z

1

Apply css to document.write

<html>
    <head>
        <meta charset="utf-8">
        <title>Array Font Colors</title>
    </head>

    <body>
        <script type="application/javascript">
            var colors= new Array("Black", "White", "Yellow");

            for(var a=0; a<colors.length; a++){
            document.write("<p style='color:"+colors[a]+"'>"+colors[a]+ "</p>");
            }

        </script>   
    </body>
</html>

answered Feb 27, 2018 at 5:57

Tibin

6441 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gurvinder372 · Accepted Answer · 2018-02-27 05:53:57Z

0

Instead of using document.write, append a span tag to the body.

Replace that document.write statement by

document.body.innerHTML += "<span style='color:" + colors[a] + "'>" + colors[a] + "</span>";

answered Feb 27, 2018 at 5:53

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

Leventis fidasx Panagiotis · Accepted Answer · 2018-02-27 06:01:23Z

0

not the best way but try this
document.write(colors[a].fontcolor("yourcolor")+ "<br>")

can be any css color // #db3f3f ,"red" etc..

answered Feb 27, 2018 at 6:01

Leventis fidasx Panagiotis

11 bronze badge

Comments

Ganesh Putta · Accepted Answer · 2018-02-27 06:02:08Z

0

You can try that in both ways by using document.body.innerHTML or document.write

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Array Font Colors</title>
</head>

<body>
<script type="application/javascript">
    var colors= new Array("Black", "White", "Yellow");

    for(var a=0; a<colors.length; a++){
     //  document.body.innerHTML += "<div style='color:" + colors[a] + "'>" + colors[a] + "</div>";
       //or
        document.write("<div style='color:" + colors[a] + "'>" + colors[a] + "</div>");
        }
       

</script>   
</body>
</html>

edited Feb 27, 2018 at 6:02

answered Feb 27, 2018 at 5:56

Ganesh Putta

2,6872 gold badges22 silver badges27 bronze badges

Collectives™ on Stack Overflow

Change Font Colors of specific Elements in Array - Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related