title: Change Div's Style with Javascript
body: <p>I'm trying to create a set of divs with content from an array specified on the page in Javascript, then filter the results and change a few of the div's style dependant on the result.</p>
  
  <p>The current issue with my code is that it seems to only change one div rather than all that currently use the row id.</p>
  
  <p>Any help is appreciated, perhaps suggestions as to how I might do parts better.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"&gt;     &lt;/script&gt;
  &lt;style type="text/css"&gt;
      #testId
      {
          border: 1px solid red;
          width: 300px;
      }
      #row
      {
          border: 1px solid black;
          width: 200px;
      }
      .odd
      {
          border: 1px solid black;
          width: 200px;   
          background-color: #CCC;
      }
      .row2
      {
          color: red;
      }        
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  var people = [{"name": "Dave" , "age" : 35}, {"name": "Sally" , "age" : 13}, {"name": "Barry" , "age" : 50}, {"name": "Harry" , "age" : 40}, {"name": "Catherine" , "age" : 24}];
  function ages()
    {
        var j = 0;
        for (item in people)
        {
            if (people[j]["age"] &gt; 30)
            { 
              var elem = document.getElementById("row");
              elem.style.backgroundColor = "gray";
            }
            j=j+1;          
        }
    }
      $(function () {
          $('#btnRun').bind('click', function (event) {
              $('#testId').html('Here are the results....');          
          });
      });
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
  &lt;div&gt;
      &lt;div id="testId"&gt;
      Please click "Run" to show the people:&lt;/div&gt;
      &lt;input id="btnRun" type="button" value="Run..." onclick="ages()"/&gt;
      &lt;div id="listContainer"&gt;
      &lt;script&gt;
      var c = 0;      
          for (var i=0;i&lt;people.length;i++)
          {
  
              if (c == 1)
                  {
                  c = 0;
                  document.write("&lt;div id='row'&gt;");
                  document.write(people[i]["name"] + " " + people[i]["age"]);
                  document.write("&lt;/div&gt;");
                  }
              else
                  {
                  c = 1;
                  document.write("&lt;div id='row' class='odd'&gt;");
                  document.write(people[i]["name"] + " " + people[i]["age"]);
                  document.write("&lt;/div&gt;");
                  }
          }       
      &lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Research:
  <a href="http://www.w3schools.com/js/default.asp" rel="nofollow noreferrer">http://www.w3schools.com/js/default.asp</a></p>
  
  <p><a href="https://stackoverflow.com/questions/5753680/change-css-of-class-in-javascript">Change CSS of class in Javascript?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript">How can I create a two dimensional array in JavaScript?</a></p>
  
  <p>*Edit</p>
  
  <p>I did it, thanks to everyone who helped!
  What I ended up doing was changing all the ID's to classes and removed the need to search via getElementById.</p>
  
  <p>Ill post my code below in the vague hope it might help someone in the future.</p>
  
  <pre><code>       &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
        &lt;title&gt;test&lt;/title&gt;
        &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;style type="text/css"&gt;
            #testId
            {
                border: 1px solid red;
                width: 300px;
            }
            .row
            {
                border: 1px solid black;
                width: 200px;
            }
            .odd
            {
                border: 1px solid black;
                width: 200px; 
                background-color: #CCC;
            }
            .red
            {
                border: 1px solid red;
                width: 200px;
                color: red;
            }        
        &lt;/style&gt;
        &lt;script type="text/javascript"&gt;
        var people = [{"name": "Dave" , "age" : 35}, {"name": "Sally" , "age" : 13}, {"name": "Barry" , "age" : 50}, {"name": "Harry" , "age" : 40}, {"name": "Catherine" , "age" : 24}];
        function ages()
          {
  
            var html = "";    
                for (var j=0;j&lt;people.length;j++)
                {
                    if (people[j]["age"] &gt; 30)
                    { 
                    var string = people[j]['name'] + ' ' + people[j]['age'];                
                    var html = html + "&lt;div class='red'&gt;" + string + "&lt;/div&gt;";
                    }
                    else
                    {
                    var string = people[j]['name'] + ' ' + people[j]['age'];                
                    var html = html + "&lt;div class='row'&gt;" + string + "&lt;/div&gt;";    
                    }
                }
                document.getElementById("listContainer").innerHTML=html;  
  
  
  
  
          }
            $(function () {
                $('#btnRun').bind('click', function (event) {
                    $('#testId').html('Here are the results....');            
                });
            });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;
            &lt;div id="testId"&gt;
            Please click "Run" to show the people:&lt;/div&gt;
            &lt;input id="btnRun" type="button" value="Run..." onclick="ages()"/&gt;
            &lt;div id="listContainer"&gt;
            &lt;script&gt;
            var c = 0;
            var html = "";    
                for (var i=0;i&lt;people.length;i++)
                {
  
                    var string = people[i]['name'] + ' ' + people[i]['age'];
  
                    if (c == 1)
                        {
                        c = 0;
                        var html = html + "&lt;div class='row'&gt;" + string + "&lt;/div&gt;";
  
                        }
                    else
                        {
                        c = 1;
                        var html = html + "&lt;div class='row, odd'&gt;" + string + "&lt;/div&gt;";
                        }
                }
                document.getElementById("listContainer").innerHTML=html;  
            &lt;/script&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>