JavaScript getElementByID () non funziona [duplicato]

StackOverflow https://stackoverflow.com/questions/1829925

  •  11-09-2019
  •  | 
  •  

Domanda

    

Questa domanda ha già una risposta qui:

         

Perché refButton ottenere null nel seguente codice JavaScript? 

<html>
<head>
    <title></title>
    <script type="text/javascript">
        var refButton = document.getElementById("btnButton");

        refButton.onclick = function() {
            alert('I am clicked!');
        };
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <input id="btnButton" type="button" value="Click me"/>
    </div>
    </form>
</body>
</html>
È stato utile?

Soluzione

Al punto che si sta chiamando la funzione, il resto della pagina non ha reso e quindi l'elemento non è in vigore in quel punto. Prova a chiamare la funzione su window.onload forse. Qualcosa di simile a questo: 

<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
           var refButton = document.getElementById("btnButton");

            refButton.onclick = function() {
                alert('I am clicked!');
            }
        };
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <input id="btnButton" type="button" value="Click me"/>
    </div>
    </form>
</body>
</html>

Altri suggerimenti

Hai bisogno di mettere il JavaScript alla fine del tag body.

E non lo trova perché non è nel DOM ancora!

Si può anche avvolgere nel gestore di eventi onLoad in questo modo: 

window.onload = function() {
var refButton = document.getElementById( 'btnButton' );
refButton.onclick = function() {
   alert( 'I am clicked!' );
}
}

Perché quando lo script viene eseguito il browser non ha ancora analizzato il <body>, in modo che non sanno che c'è un elemento con l'id specificato.

Prova a modificare: 

<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = (function () {
            var refButton = document.getElementById("btnButton");

            refButton.onclick = function() {
                alert('Dhoor shala!');
            };
        });
    </script>
    </head>
<body>
    <form id="form1">
    <div>
        <input id="btnButton" type="button" value="Click me"/>
    </div>
</form>
</body>
</html>

Si noti che si può anche utilizzare addEventListener invece di window.onload = ... per far sì che la funzione esegue solo dopo che l'intero documento è stato analizzato.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top