CODEWITHSUNDEEP
javascripthtmlcss
user3044919
user3044919

Reputation: 29

How do I change the color and width of divs?

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>

Upvotes: 2

Views: 150

Answers (6)

Mahib
Mahib

Reputation: 4063

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/

Upvotes: 0

Manoj
Manoj

Reputation: 1890

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

Upvotes: 0

saman khademi
saman khademi

Reputation: 842

and you can use jquery each

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

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100195

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

Upvotes: 5

CRABOLO
CRABOLO

Reputation: 8793

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';
}

Upvotes: 0

Hasan Hashem
Hasan Hashem

Reputation: 1

 <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>

Upvotes: -1

Related Questions