document.getElementById() doesn't work?

Question

No much to say,

<html>
    <body>
        <script>
            var x = document.getElementById('btn1');
            alert(x);
        </script>
            <input type="button" id="btn1" value="Clickme" onclick="alert('1')" />
    </body>
</html>

The alert message is null instead of a message contain details of the object or something like that.

What is the problem?

score 31 · Accepted Answer · answered Dec 07 '13 at 08:43

31

Put your script AFTER the actual element, otherwise by the time your javascript code runs, there's not yet such element in the DOM.

<html>
    <body>
        <input type="button" id="btn1" value="Clickme" onclick="alert('1')" />
        <script>
            var x = document.getElementById('btn1');
            alert(x);
        </script>
    </body>
</html>

Alternatively put your script in a DOM ready event to ensure that the DOM is fully loaded by the browser before attempting to manipulate it:

<html>
    <body>
        <script>
            window.onload = function() {
                var x = document.getElementById('btn1');
                alert(x);
            };
        </script>
        <input type="button" id="btn1" value="Clickme" onclick="alert('1')" />
    </body>
</html>

answered Dec 07 '13 at 08:43

Darin Dimitrov

960,118
257
3,196
2,876

You're welcome. Any reason for the downvote? – Darin Dimitrov Dec 07 '13 at 08:46
I have upvoted, I don't know who have downvoted. – Billie Dec 07 '13 at 08:47
I know, it would have been nice if the downvoter left a comment explaining why he downvoted. Maybe he found a mistake or something wrong in the answer. – Darin Dimitrov Dec 07 '13 at 08:47
3

Why will anyone downvote this??it's a clear solution.. – Joke_Sense10 Dec 07 '13 at 08:47
2

downvote for this nice solution?? why?? – Prasanth K C Dec 07 '13 at 08:50

score 7 · Answer 2 · answered Dec 07 '13 at 08:43

7

You need to run the javascript after the html s read/rendered...

Try this instead:

<html>
    <body>
        <input type="button" id="btn1" value="Clickme" onclick="alert('1')" />
        <script>
            var x = document.getElementById('btn1');
            alert(x);
        </script>
    </body>
</html>

Or you can add a window load function so the script only runs after the page has loaded. Like:

<html>
    <body>
        <script>
            window.onload = function(){
                var x = document.getElementById('btn1');
                alert(x);
            }
        </script>
            <input type="button" id="btn1" value="Clickme" onclick="alert('1')" />
    </body>
</html>

answered Dec 07 '13 at 08:43

Sergio

27,160
10
79
126

1

Are you and Darin the same person? ;) – GolezTrol Dec 07 '13 at 08:46
@GolezTrol, haha :) nope, but we did think the same here... he answered **1 second** before me :) – Sergio Dec 07 '13 at 08:47
1

And you both made the same addition at almost the same time as well, so I guess you both deserver some upvotes. – GolezTrol Dec 07 '13 at 08:48
@GolezTrol, yeah, that was fun actually. I edited ,my answer and he had done the dame edit (1 second before me, again...) – Sergio Dec 07 '13 at 08:52

score 0 · Answer 3 · answered Dec 07 '13 at 08:44

Its because your are trying to access the button information before its created in the dom of the document.Give the script a the end of the body like below

<html>
    <body>

        <input type="button" id="btn1" value="Clickme" onclick="alert('1')" />
        <script>
            var x = document.getElementById('btn1');
            alert(x);
        </script>
    </body>
</html>

DEMO

score 0 · Answer 4 · answered Dec 07 '13 at 08:44

0

Javascript codes run from top to bottom. In the line alert(x), there is no input#btn1 yet. You can use:

window.onload = function() {
    var x = document.getElementById('btn1');
    alert(x);
}

answered Dec 07 '13 at 08:44

Mohammad Javad Naderi

468
4
12

score 0 · Answer 5 · answered Dec 07 '13 at 08:47

0

<script type="text/javascript">
     function call()
     {
        var x = document.getElementById('btn1').value.trim();//or use "=<%btn1.ClientID%>"
        alert(x);
     }
      </script>

put this function onClientClick event of your button.

answered Dec 07 '13 at 08:47

The Hungry Dictator

3,247
4
34
47

score 0 · Answer 6 · answered Dec 07 '13 at 08:47

When the script is executed first there is no element with id #btn1 loaded in the dom. So execute the script after the element is loaded.

Like this,

    <input type="button" id="btn1" value="Clickme" onclick="alert('1')" />
    <script>
        var x = document.getElementById('btn1');
        alert(x);
    </script>
</body>

score 0 · Answer 7 · answered Dec 07 '13 at 09:23

0

window.addEventListener('DOMContentReady',function(){
    var x = document.getElementById('btn1');
    alert(x);
};

Using 'DOMContentReady' event is better than 'window.onload' if your broswer support.

answered Dec 07 '13 at 09:23

yoyo

712
6
4

document.getElementById() doesn't work?

7 Answers7

Linked

Related