CODEWITHSUNDEEP
javascript
mike
mike

Reputation: 21

Getting an element by id every time I loop through

So my issue is, whenever I run this loop, it only grabs the changes to the element on the first flip through. Is there a way to make it make those changes every time? 

<script>
for ( i=0; i<5; i++){
    document.write('<div id=\"blah\" >text</div>');
    var b = document.getElementById("blah"); 
    b.style.width ="200px";      
    b.style.backgroundColor="yellow";
}
</script>

Upvotes: 0

Views: 189

Answers (3)

Ian
Ian

Reputation: 50913

I have two ideas to overcome this. The first is to create the element, change its style, and append it.

<script type="text/javascript">
    for (var i = 0; i < 5; i++) {
        var div = document.createElement("div");
        div.style.width = "200px";
        div.style.backgroundColor = "yellow";
        document.appendChild(div);
    }
</script>

The other idea is that you don't need a reference to the DOM element, because you're only changing style, so you can apply the style with CSS. For example:

<style type="text/css">
    div.something {
        width: 200px;
        background-color: yellow;
    }
</style>

<script type="text/javascript">
    for (var i = 0; i < 5; i++) {
        document.write("<div class='something'>text</div>");
        // Or use the createElement/appendChild approach from above,
        //  where you'd need to set the div.className property as "something"
    }
</script>

Upvotes: 2

ExceptionLimeCat
ExceptionLimeCat

Reputation: 6400

You need to add the element to the DOM to be able to access it later.

for(var i=0;i<5;i++)
{
  //I'm not sure if you are just trying to make these changes each iteration
  //or create a new element each time. If you are trying to create a new element
  //each time. I'd def consider going a diff route i.e. use classes.
  var b;
  if( i==0 ){
    b = document.createElement("DIV"); 
    b.id = "blah";}
  else{
    b = document.getElementById("blah");}

  b.style.width ="200px";      
  b.style.backgroundColor="yellow";
}

Upvotes: 0

karthikr
karthikr

Reputation: 99660

id has to be unique in a document. hence the issue. The DOM would return only 1 node even if there are multiple matches.

You can do something like this:

for (var i=0; i<5; i++){
    var div = '<div class="blah" >text</div>';
    div.style.width ="200px";
    div.style.backgroundColor="yellow";
    document.write(div);
}

Upvotes: 3

Related Questions