www.webdeveloper.com
Results 1 to 5 of 5

Thread: Need help with getElementById

  1. #1
    Join Date
    Jan 2011
    Posts
    5

    Need help with getElementById

    I have code that needs to be repeated quite often and Im not sure how to do it. It would be nice if the value of "REV" could automatically associate itself with whatever Id that is the name number as REV.


    heres a small portion of the code

    if (REV == 01) {document.getElementById("a01").style.backgroundColor = "#00DD00";}
    if (REV == 02) {document.getElementById("a02").style.backgroundColor = "#00DD00";}
    if (REV == 03) {document.getElementById("a03").style.backgroundColor = "#00DD00";}
    if (REV == 04) {document.getElementById("a04").style.backgroundColor = "#00DD00";}
    if (REV == 05) {document.getElementById("a05").style.backgroundColor = "#00DD00";}

    any help is appreicated.

  2. #2
    Join Date
    Jan 2011
    Posts
    5
    I should probably have been more descriptive. I am looking for a way to get the id element to be the same as the value of REV without using hundreds of lines of code that I am using now.

    This code is used for changing the background colors of 100 different squares on a page. The square color changes depending on different values.

    Here's My website

  3. #3
    Join Date
    Feb 2006
    Posts
    2,927
    var who=document.getElementById("a"+REV);
    if(who)who.style.backgroundColor = "#00DD00";

    Note that you cannot have a literal 01 or 02- it would have to be a string '01', '02', etc.

  4. #4
    Join Date
    Jan 2011
    Posts
    5
    Thank you Mrhoo. it worked perfectly.

  5. #5
    Join Date
    Mar 2009
    Posts
    492
    You might want to try this. If you have to cycle through document.getElementById
    for each box every time you want to change their colors it can be very inefficient. The getRefs function below returns an array of all the references that you can manipulate directly. Run it once when the page loads and then it will be pretty easy to manage the elements provided you store the output in a global array.

    Code:
    function getRefs(str){  //str in your case would be 'REV'
       var x, current, flag, ctr, ref = Array();
       current = new String();
       flag = true;
       ctr = 1;  //since you're starting at '01' rather than zero
    
       while(flag){
          flag = false;
          current = ctr + ''; 
          if(current.length == 1){
             current = '0' + current;
          }
          current = str + current;
          alert(current);
          x = document.getElementById(current);
          if(x != (null || undefined)){
             ref.push(x);
             ctr++;
             flag = true;
          }
       }
    return ref;
    }   
    
    window.onload=function(){
    var z = getRefs('REV');
    for( var i = 0; i < z.length; i++){
       z[i].style.backgroundColor = "red";
    }
    }
    Note though that the chain must be continuous. If you have a "REV12" and a "REV14" but no "REV13" the function won't map anything after the gap.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles