document.getElementById() 不起作用？ [复制]答案

【问题标题】：document.getElementById() doesn't work? [duplicate]document.getElementById() 不起作用？ [复制]
【发布时间】：2013-12-24 17:18:51
【问题描述】：

没什么好说的，

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

警报消息是null，而不是包含对象详细信息或类似内容的消息。

有什么问题？

【问题讨论】：

标签： javascript html

【解决方案1】：

将您的脚本放在实际元素之后，否则当您的 javascript 代码运行时，DOM 中还没有这样的元素。

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

或者将您的脚本置于 DOM 就绪事件中，以确保 DOM 在尝试操作之前已被浏览器完全加载：

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

【讨论】：

不客气。否决票的任何理由？
我投了赞成票，不知道谁投了反对票。
我知道，如果投反对票的人留下评论解释他投反对票的原因，那就太好了。也许他在答案中发现了错误或错误。
为什么会有人对此投反对票？这是一个明确的解决方案..
否决这个不错的解决方案？？为什么？？

【解决方案2】：

您需要在读取/渲染 html 之后运行 javascript...

试试这个：

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

或者您可以添加一个窗口加载功能，以便脚本仅在页面加载后运行。喜欢：

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

【讨论】：

你和达林是同一个人吗？ ;)
@GolezTrol，哈哈 :) 不，但我们在这里也有同样的想法……他比我早 1 秒 回答 :)
而且你们几乎同时添加了相同的内容，所以我想你们都应该得到一些支持。
@GolezTrol，是的，这实际上很有趣。我编辑了我的答案，他已经完成了编辑（比我早 1 秒，再次......）

【解决方案3】：

这是因为您试图在 在文档的 dom 中创建按钮之前访问按钮信息。如下所示，给脚本一个正文的结尾

<html>
    <body>

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

DEMO

【讨论】：

【解决方案4】：

Javascript 代码从上到下运行。在alert(x) 行中，还没有input#btn1。您可以使用：

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

【讨论】：

【解决方案5】：

当script首先执行时，dom中没有加载id为#btn1的元素。所以在加载元素后执行script。

像这样，

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

【讨论】：

【解决方案6】：

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

把这个函数onClientClick你的按钮的事件。

【讨论】：

【解决方案7】：

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

如果您的浏览器支持，使用 'DOMContentReady' 事件比使用 'window.onload' 更好。

【讨论】：