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

回答1:

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

回答2:

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?

来源：https://stackoverflow.com/questions/39367126/javascript-getelementbyid-vs-getelementsbyid-both-works-on-different-pages

标签

javascript

html

dom