Javascript: getElementById vs getElementsById (Both Works on Different Pages)

I'm struggling with a really weird problem...

I have two pages (quite the sames) where I need to disable some selects. On one of them (say page A), I use getElementById to retrieve my element, and on the second one (say page B) I use getElementsById (with a 's') to retrieve it (and it works on both cases).

What is weird is that if I use getElementsById on page A (with the 's'), it gives me the error "document.getElementsById is not a function", which is normal because this function (with the 's') normally doesn't exist. But I don't have this error on page B, and if I use getElementById (without the 's') on this page, it doesn't works !?!?

Can someone give me an explanation ? (I'll lose the few hairs left on my head if it continue ...)

Thanks in advance!

Ps: Sorry for my poor english!

Edit: Here is the code of my pages:

Page A:

function controleDelaiFranchise (casChoix){
        var estAvecGarantie = <bean:write property="avecGarantie" name="simulationAutonomeForm" filter="false"/>;

        if(estAvecGarantie ==true){

            if(casChoix == 'Emprunteur'){
                document.getElementById("assDelaiFranchiseEmpr").disabled = false;
            }
            else {
                if(casChoix == 'CoEmprunteur'){
                    document.getElementById("assDelaiFranchiseCoEmpr").disabled = false;
                }
            } 
        }
        else{

            if(casChoix == 'Emprunteur'){
                document.getElementsById("assDelaiFranchiseEmpr").disabled = true;
            }
            else {
                if(casChoix == 'CoEmprunteur'){
                    document.getElementById("assDelaiFranchiseCoEmpr").disabled = true;
                }
            } 
        }

Page B:

function controleDelaiFranchise (casChoix){
        var estAvecGarantie = document.getElementsByName("estAvecGarantie")[0].value;

        if(estAvecGarantie){

            if(casChoix == 'Emprunteur'){
                document.getElementsById("assDelaiFranchiseEmpr").disabled = false;
            }
            else {
                if(casChoix == 'CoEmprunteur'){
                    document.getElementsById("assDelaiFranchiseCoEmpr").disabled = false;
                }
            } 
        } else {

            if(casChoix == 'Emprunteur'){
                document.getElementsById("assDelaiFranchiseEmpr").disabled = true;
            }
            else {
                if(casChoix == 'CoEmprunteur'){
                    document.getElementsById("assDelaiFranchiseCoEmpr").disabled = true;
                }
            } 
        }

    }

Edit 2:

Ok so when it was not working on page B (without 's') I had

var estAvecGarantie = document.getElementsByName("estAvecGarantie")[0].value;
if(estAvecGarantie){ ... }

I replace it with

var estAvecGarantie = document.getElementsByName("estAvecGarantie")[0].value;
if(estAvecGarantie == true) { ... }

and now it works using getElementById without the 's'

But I still don't understand why it's still working with this damn 's' ... So my problem is solved (ish), but still, if someone have an explanation for why can I used getElementsbyId() even if the function doesn't exist (and specifically on one page only), I'm all ears because I hate when I don't understand ...

9

2 Answers

As described by James here id values have to be unique in a document, so there will be only one "element" that matches, rather than multiple "elements".

That is the reason, We should not use s while selecting elements. As Id can be selected only one at a time.

However, there are methods that return multiple elements which do use the plural "elements", such as getElementsByTagName.

Hope that clears your confusion

7

First things first: Function-, or rather, methodnames in JavaScript are Case-Sensitive. This means that document.getElementById is not the same as document.getElementbyId.

The weird part: document.getElementsById does not exsist in JavaScript, so it can't work by default. The only way this can work is if somebody created this function/method on the other page. A more obvious explanation is that you made a type-o on your second page. Maybe you forgot to write the S and you thought you didn't. Can you try again?

7

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Sarah Jenkins

Sarah Jenkins

Senior Technology Editor & AI Specialist

Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.

Share this article
Twitter Facebook Pinterest