Change Div's Style with Javascript

Question

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.

The current issue with my code is that it seems to only change one div rather than all that currently use the row id.

Any help is appreciated, perhaps suggestions as to how I might do parts better.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript">     </script>
<style type="text/css">
    #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;
    }        
</style>
<script type="text/javascript">
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"] > 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....');          
        });
    });
    </script>
 </head>
 <body>
<div>
    <div id="testId">
    Please click "Run" to show the people:</div>
    <input id="btnRun" type="button" value="Run..." onclick="ages()"/>
    <div id="listContainer">
    <script>
    var c = 0;      
        for (var i=0;i<people.length;i++)
        {

            if (c == 1)
                {
                c = 0;
                document.write("<div id='row'>");
                document.write(people[i]["name"] + " " + people[i]["age"]);
                document.write("</div>");
                }
            else
                {
                c = 1;
                document.write("<div id='row' class='odd'>");
                document.write(people[i]["name"] + " " + people[i]["age"]);
                document.write("</div>");
                }
        }       
    </script>
    </div>
</div>

Research: http://www.w3schools.com/js/default.asp

Change CSS of class in Javascript?

How can I create a two dimensional array in JavaScript?

*Edit

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.

Ill post my code below in the vague hope it might help someone in the future.

       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title>test</title>
      <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
      <style type="text/css">
          #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;
          }        
      </style>
      <script type="text/javascript">
      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<people.length;j++)
              {
                  if (people[j]["age"] > 30)
                  { 
                  var string = people[j]['name'] + ' ' + people[j]['age'];                
                  var html = html + "<div class='red'>" + string + "</div>";
                  }
                  else
                  {
                  var string = people[j]['name'] + ' ' + people[j]['age'];                
                  var html = html + "<div class='row'>" + string + "</div>";    
                  }
              }
              document.getElementById("listContainer").innerHTML=html;  




        }
          $(function () {
              $('#btnRun').bind('click', function (event) {
                  $('#testId').html('Here are the results....');            
              });
          });
      </script>
  </head>
  <body>
      <div>
          <div id="testId">
          Please click "Run" to show the people:</div>
          <input id="btnRun" type="button" value="Run..." onclick="ages()"/>
          <div id="listContainer">
          <script>
          var c = 0;
          var html = "";    
              for (var i=0;i<people.length;i++)
              {

                  var string = people[i]['name'] + ' ' + people[i]['age'];

                  if (c == 1)
                      {
                      c = 0;
                      var html = html + "<div class='row'>" + string + "</div>";

                      }
                  else
                      {
                      c = 1;
                      var html = html + "<div class='row, odd'>" + string + "</div>";
                      }
              }
              document.getElementById("listContainer").innerHTML=html;  
          </script>
          </div>
      </div>
  </body>
  </html>

Such an old version of jQuery to be learning with too... – crush Jul 16 '13 at 20:01 — crush, Jul 16 '13 at 20:01
`id` values should always be unique within a single page. – James Montagne Jul 16 '13 at 20:03 — James Montagne, Jul 16 '13 at 20:03

score 2 · Accepted Answer · answered Jul 16 '13 at 20:04

2

The Id attribute should have a unique value for each element it is defined on. Using document.getElementById only returns a single element, the first that is finds with the matching id. Hence Element and not Elements.

In this case you should use a class as a flag or use the name attribute to find the matching elements.

answered Jul 16 '13 at 20:04

Justin

3,337
3
16
27

Thanks for pointing that out! Made complete sense after I read your answer. – MCooke Jul 16 '13 at 21:35

score 2 · Answer 2 · answered Jul 16 '13 at 20:09

2

As everyone else has stated you need to use classes instead of Ids because ids must be unique. Then you can set the background-color of elements with a certain class (row in this example) like this:

$(".row").css("background-color", "grey");

This uses jQuery which you have included.

answered Jul 16 '13 at 20:09

jlars62

7,183
7
39
60

Thanks bud! Though I didn't use this way in the end it opened my eyes nevertheless. – MCooke Jul 16 '13 at 21:33
@MCooke No problem glad it helped. :) And even though you accepted the other answer, if my answer was helpful I would appreciate it if you voted it up. Thanks! – jlars62 Jul 16 '13 at 21:37
No problem, just got enough rep to actually vote so take my first! – MCooke Jul 16 '13 at 21:43

Change Div's Style with Javascript

2 Answers2