How do I change the color and width of divs?

Question

I want the for a div a different color and width specified by means of two arrays and in a for loop but I can't find how to get this done. So I have 5-divs that all should have a different color and a separate width.

Does anyone here have any experience with that and can help me? Thanks.

    <html>
    <head>
        <title>Hoi</title>
    <script type="text/javascript">

        var color = Array("#F00","#FF0","#0F0","#0FF","#00F");
        var width = Array("20", "40", "60", "80", "100");

        {
            for (i=0; i<5; i++)
            {
                document.getElementById('div'+i).style.backgroundColor = color[i];
                document.getElementById('div'+i).style.width = width[i];
            }
        }

        </script>
    </head>
    <body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
        <div id="div4">div4</div>
        <div id="div5">div5</div>
    </body>
</html>

maybe this helps http://stackoverflow.com/questions/5915096/get-random-item-from-javascript-array — caramba, Jan 20 '14 at 10:18

Sudhir Bastakoti · Accepted Answer · 2014-01-20T10:23:53.847

5

change your for loop from:

for (i=0; i<5; i++) {
  document.getElementById('div'+i).style.backgroundColor = color[i];
  document.getElementById('div'+i).style.width = width[i];

to

for (i=1; i <= 5; i++) {
    document.getElementById('div'+i).style.backgroundColor = color[i-1];
    document.getElementById('div'+i).style.width = width[i-1] + "px";

and change:

document.getElementById('div'+i).style.width = width[i];

to

document.getElementById('div'+i).style.width = width[i-1] + "px";

and add your js code just before closing of body tag Demo:: jsFiddle

edited Jan 20 '14 at 10:23

answered Jan 20 '14 at 10:18

Sudhir Bastakoti

99,167
15
158
162

then `width[i]` should be `width[i - 1]` – Grijesh Chauhan Jan 20 '14 at 10:20

score 0 · Answer 2 · answered Jan 20 '14 at 10:22

http://jsfiddle.net/uQnsr/1/

var color = new Array("#F00", "#FF0", "#0F0", "#0FF", "#00F");
var width = new Array("20", "40", "60", "80", "100");

for (i = 1; i < 6; i++) {
    document.getElementById('div' + i).style.backgroundColor = color[i];
    document.getElementById('div' + i).style.width = width[i] + 'px';
}

score 0 · Answer 3 · edited Jan 20 '14 at 10:41

0

Try this code:

var color = Array("#F00", "#FF0", "#0F0", "#0FF", "#00F");
var width = Array("20", "40", "60", "80", "100");    
for (var i=0; i<5; i++)
{    
    document.getElementById('div'+(i+1)).style.backgroundColor = color[i];
    document.getElementById('div'+(i+1)).style.width = width[i] + "px";
}

Demo: Fiddle

edited Jan 20 '14 at 10:41

Grijesh Chauhan

57,103
20
141
208

answered Jan 20 '14 at 10:24

Manoj

1,860
1
13
25

score 0 · Answer 4 · answered Jan 20 '14 at 10:29

0

and you can use jquery each

$('div[id*=div]').each(function(index,value)

answered Jan 20 '14 at 10:29

saman khademi

822
1
6
13

Can you add a Fiddle Demo for me? – Grijesh Chauhan Jan 20 '14 at 10:43

score 0 · Answer 5 · answered Jan 20 '14 at 10:49

Why don't you use JQuery. Its faster and quick to fix.

<title>Hoi</title>

<body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
        <div id="div4">div4</div>
        <div id="div5">div5</div>
</body>

Here is your JS code:

$(document).ready(function(){

var color = Array("#F00","#FF0","#0F0","#0FF","#00F");
var width = Array("20", "40", "60", "80", "100");

            for (i=1; i<6; i++)
            {
                $("#div" + i ).css("background-color", color[i-1]);
                $("#div" + i).css("width",width[i-1]);                                
            }
});

You can check on http://jsfiddle.net/C48nd/

score -1 · Answer 6 · answered Jan 20 '14 at 10:22

 <html>
    <head>
        <title>Hoi</title>

    </head>
    <body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
        <div id="div4">div4</div>
        <div id="div5">div5</div>
    </body>
    <script type="text/javascript">

        var color = Array("#F00","#FF0","#0F0","#0FF","#00F");
        var width = Array("20px", "40px", "60px", "80px", "100px");

        {
            for (i=1; i<5; i++)
            {

                var strId = "div" + i;
                alert(strId);
                document.getElementById(strId).style.background = color[i];
                document.getElementById(strId).style.width = width[i];
            }
        }

        </script>
</html>

How do I change the color and width of divs?

6 Answers6