javascripthtmldom

Javascript: getElementById vs getElementsById (both work on different pages)


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

I have two identical pages (quite the same) 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 work ?!

Can someone give me an explanation?

Thanks in advance!

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 ...


Solution

  • 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