JavaScript getElementByID（）不工作_Javascript_Getelementbyid

JavaScript getElementByID（）不工作

javascript

JavaScript getElementByID（）不工作,javascript,getelementbyid,Javascript,Getelementbyid,为什么在下面的JavaScript代码中，refButtongetnull <html> <head> <title></title> <script type="text/javascript"> var refButton = document.getElementById("btnButton"); refButton.onclick = function() {

为什么在下面的JavaScript代码中，

refButton

get

null

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


var refButton=document.getElementById（“btnButton”）；
refButton.onclick=函数（）{
警惕（“我被点击了！”）；
};

您需要将JavaScript放在body标记的末尾。

它找不到它，因为它还不在DOM中

您还可以将其包装到onload事件处理程序中，如下所示：

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

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

在调用函数时，页面的其余部分尚未呈现，因此该元素在该点不存在。尝试在

窗口上调用函数。可能是onload

。大概是这样的：

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

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


window.onload=函数（）{
var refButton=document.getElementById（“btnButton”）；
refButton.onclick=函数（）{
警惕（“我被点击了！”）；
}
};

因为当脚本执行时，浏览器尚未解析

，因此它不知道存在具有指定id的元素

请尝试以下方法：

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


window.onload=（函数（）{
var refButton=document.getElementById（“btnButton”）；
refButton.onclick=函数（）{
警报（'dhoorshala！'）；
};
});

<>请注意，您可以使用<代码> AdvestEnter侦听器< /C> >而不是<代码> WiDOW.OnLoad =…<代码>，以使该函数在整个文档被解析之后才执行。

或考虑使用原型，JQuery或其他一些包来处理DOM就绪事件。我认为他不需要为DOM就绪事件导入整个库。；）@保罗：说得好@JMSA DOM就绪事件实际上在下载所有图像之前以及下载所有脚本和页面之后触发。因此，DOM ready事件在window.onload事件之前激发。：）这是标准做法还是仅在这种情况下？标准做法是从页面加载时开始执行。标准做法是仅在构建DOM树后运行脚本。不，只有在页面完全加载时，该树才准备就绪。由于

标记是文档的一部分，因此您的建议也不够。我要么看一看JavaScript包，要么如果这对您的实现来说太过分了，就看一看：@JMSA-不一定。这完全取决于您需要它做什么，以及页面在整个呈现过程中的进度。附加到window.onload事件将确保页面中包含的所有文件（CSS、JS、图像）都已下载。如果您知道您只需要在脚本标记上方呈现的HTML就可以正常工作，但最好附加到事件并了解这些事件的含义。window.onload在解析整个文档并下载所有文件之前不会启动