Getting an element by id every time I loop through

Question

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>

This might help http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice. Also, you forgot to declare `i`. — elclanrs, Jun 05 '13 at 20:56
id is unique, you should use the name property and use getElementsByName() — Saturnix, Jun 05 '13 at 21:00

score 3 · Answer 1 · answered Jun 05 '13 at 20:58

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

Ian · Answer 2 · 2013-06-06T13:37:46.430

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>

score 0 · Answer 3 · answered Jun 05 '13 at 21:08

0

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

answered Jun 05 '13 at 21:08

ExceptionLimeCat

6,191
6
44
77

I'm trying to make changes each iteration and print it out with those changes each time. The changes are coming from a separate php variable in a different loop, but that doesn't seem to be the issue. The main issue is that I can't seem to change an element multiple times based on affecting its style in a loop. Is there a better way to do that? None of these solutions seem to solve that issue. Thanks a bunch to everyone answering, by the way! – mike Jun 05 '13 at 21:21
Using jQuery would make things much easier, but what is the purpose of the loop? Is there several elements that need to be changed or are you changing one element everytime something happens? – ExceptionLimeCat Jun 05 '13 at 21:27
I'm changing one element every time it loops through, but I want it to print out the element each time it's changed. – mike Jun 05 '13 at 21:40
with the code you've provided, this loop is going to create an element then set some styles and nothings going to change on later iterations bc you do not tell it to. It just sets those two CSS properties with the same values over and over again. What is the desired effect? – ExceptionLimeCat Jun 05 '13 at 21:45
Basically I'm using several values from a database to dynamically change the width value of a unique element on each iteration with a new value each time, but because it's a novel amount of values each time, I have to make it a loop. The desired effect is to make a graph, represented by changing the style of each element, based on the values. – mike Jun 05 '13 at 21:50
So I guess a better question would be, how do I tell it to change on each iteration? – mike Jun 05 '13 at 21:52
If you are trying graph data, you should look into a graphing library like [jqPlot](http://www.jqplot.com/). – ExceptionLimeCat Jun 06 '13 at 12:32

Getting an element by id every time I loop through

3 Answers3