JavaScript getElementByID() not working

getelementbyid, javascript

Solution

At the point you are calling your function, the rest of the page has not rendered and so the element is not in existence at that point. Try calling your function on `window.onload` maybe. Something like this:

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

Problem

Why does `refButton` get `null` in the following JavaScript code? ``` <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> ```

Original source

Related problems