19 thoughts on “The difference between javascript's getElementById() and getElementsByName()”

1. Excellent info — thank you!

2. what about is you have multiple groups of check boxes and would like to select / deselect each group

   I see this function being useful there.

   Sid

3. That’s a perfect example. Thanks.

   I actually ended up using this myself after writing this article. I was interfacing with a form created by some Java code and the only identifier was a name attribute.

4. getElementById() seems to find element by name attribute as well

5. Hello!

   In the following code, I came up with a small technicality. Somewhere I have a php function which aims to create 52 buttons, one for each week of the year.
   ———————————
   <?php function calendar_week($start_week,$counter) {
   for ($i=$start_week;$i<$counter+$start_week;$i++)
   {
   echo “”;
   }
   }
   ?>
   —————————————-

   On another part of the code, I use a javascript function that tries to get the previous 52 buttons and change the buttons’ color:
   —————————————-
   function …{
   …
   for (var j=1;j<53;j++) {
   document.getElementById[“week_j”].style.backgroundColor=”blue”;
   }
   …
   }
   —————————————-

   The problem is that I haven’t found yet a way to reference “week_j”, in order to avoid writing the same line 52 times (i.e. document.getElementById[“week_(1 to 52)”].style.backgroundColor=”blue”;

   Thank you all in advance!

6. Sorry for the (annoying) multiple postings, but what is wrong with php commands???

   I cannot paste my one line code, so I’ll try to attach pseudo-code instead:

   td (start) newline

   input type (equals) button
   name (equals) calendar(underscore)week(underscore)(dollarsign)i
   id (equals) week(underscore)i
   newline

   td (end) newline

   Thanks !

7. you could do something like this:

   for (var j=1;j<53;j++) {
   var newID = "week_"+j;
   document.getElementById[newId].style.backgroundColor="blue";
   }

8. Don’t go dissin’ my good buddy getElementsByName(). Give him some love.

   Notice the singular, getElementById(), and the plural, getElementsByName(). Since you must give radio buttons a common name, getElementsByName is the way to go to get the whole group.

9. getElementsByName is incredibly useful, I am just about to use it now to discover which of my 1800 checkboxes are checked, so I can find the .value of each checked one in order to generate n quotations based on the vehicles selected.

   it beats the old fashioned way of using .all([name])

10. I can’t get getElementsByName() to work. Here’s the HTML button on my page:

    I want to hide this button in situations and tried this:

    document.getElementsByName(“btn_clr_case_id_c”).style.display = ‘none’;

    But that doesn’t work. Any thoughts why?

11. I can’t get getElementsByName() to work. Here’s the HTML button on my page:
    input type=”button” name=”btn_clr_case_id_c” tabindex=”0″ title=”Clear [Alt+C]” accessKey=”C” class=”button” onclick=”this.form.case_id_c.value = ”; this.form.proc_id1_c.value = ”;” value=”Clear”

    I want to hide this button in situations and tried this:

    document.getElementsByName(“btn_clr_case_id_c”).style.display = ‘none’;

    But that doesn’t work. Any thoughts why?

12. getElementsByName returns a nodeList, so you need to reference the specific member of the collection.

    document.getElementsByName(“btn_clr_case_id_c”)[0].style.display = ‘none’; //references the first one.

13. I’m new to JavaScript, but here’s a good reason to use getElementsByName. Assuming that you use the “id” value to uniquely identify each element on the page, you may want to get an array of a group of elements. For example, if you have dynamically created a list of buttons, you may not know how many will actually be on the page. You’ve dynamically named them button1, button2, etc. By giving them each the same name value of “dynaButts”, you can put them all into an array by calling $myArray = getElementsByName(“dynaButts”). I think that’s pretty useful.

14. getelementByid is used when we are going to implement code of html to javascript(i.e when implementing client side validation )
    getelemntbyname is used when we are going to implement validation or check xode of html to any server side language like php,jsp or asp.net

15. example below code is used to delete selected check boxes

    function valDelForm()

    {
    frmCheckform = document.form1;

    var chks = document.getElementsByName(‘checkname[]’);

    var hasChecked = false;

    // Get the checkbox array length and iterate it to see if any of them is selected

    for (var i = 0; i < chks.length; i++)
    {
    if (chks[i].checked)

    {
    hasChecked = true;
    break;
    }
    }
    }
    and checkboxes are created dynamiclly using for loop so in this case we will use getementby name

16. thanks ankur bhutani …..
    i understand all this…..

17. really good one ankur bhutani,thanks a lot…………
    any other use of getElementsByName plz if u know wanna stuck woth this ….

18. thanks all for the information this helps me a lot

19. nice 1. for more refer this http://www.etechpulse.com/2013/08/difference-between-documentgetelementsb.html