Javascript getElementById（）始终返回null，null？_Javascript_Null_Getelementbyid

Javascript getElementById（）始终返回null，null？

javascript

Javascript getElementById（）始终返回null，null？,javascript,null,getelementbyid,Javascript,Null,Getelementbyid,这些问题有很多答案，但我仍然无法解决。对不起，如果这是显而易见的。当我一直使用document.getElementById（）时，我得到null。有什么想法吗 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

这些问题有很多答案，但我仍然无法解决。对不起，如果这是显而易见的。当我一直使用document.getElementById（）时，我得到null。有什么想法吗

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Widget Text Finder</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body id="main-body">

    <div id="dp-container">
        <iframe id="dir-page" scrolling="no" src="inside.html"></iframe>
    </div>
    <div id="widget-container">
        <iframe id="widget-page" scrolling="no" src="widget.html"></iframe>
    </div>
    <script src="main.js"></script>
</body>

</html>

这是我从Chrome开发者工具中得到的

当我使用document.getElementById时，我总是得到null。请帮忙

等待加载Dom内容

 window.addEventListener('DOMContentLoaded', (event) => {
    var a = document.getElementById("pic");
    var b = document.getElementById("text");
    a.addEventListener("click", function() { b.value = "test" }); }
});

第一个

index.html

文件没有

id=“pic”

元素，因此其中一个将失败

第二个

widget.html

文件没有

id=“text”

元素，因此没有可单击的内容

第三个

inside.html

文件似乎工作正常（在本例中，我不得不将javascript直接放在页面中，但当我使用

main.js

文件对其进行本地测试时，它也按预期工作

每个html页面都应该有自己的js文件，这取决于您要完成的任务？相同的js文件不适用于所有示例


在…内
window.onload=函数（）{
var a=document.getElementById（“pic”）；
var b=document.getElementById（“文本”）；
控制台日志（a，b）；
a、 addEventListener（“单击”，function（）{b.value=“test”}）；
}

index.html没有任何id为的元素，而widget.html没有id=text的元素……document.getElementById没有“look”inside iframesOnly

inside.html

包含两个元素。如果将javascript直接放在

标记中而不是加载文件，会发生什么？OP甚至不需要等待window.load事件-如果他有id，他正在查找的脚本位于html的末尾，那么DOM将被加载。正如@Barmar所说，脚本是在

的末尾之前被引用的，这是

onload的正确位置

对不起，这通常是我遇到这个问题时的修复。这是真的，通常是在开始时有脚本并且不使用

窗口时的修复。onload

。谢谢。我想了很多。我想要完成的事情是通过主页访问iFrame文档，并使用window and document类下提供的所有功能。您的回答为我指明了一个好的方向。仅供参考：我想要的东西就在这里

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>inside</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body id="body-inside">
    <div>
        <form>
            <input id="text" value="hello" type="text" name="txt-direction">
        </form>

        <img id="pic" src="https://www.trzcacak.rs/myfile/full/57-573508_file-jupiter-symbol-svg-jupiter-astrological-sign.png" alt="direct-pic">
    </div>
    <script src="main.js"></script>
</body>

</html>

window.onload = function() {
    var a = document.getElementById("pic");
    var b = document.getElementById("text");

    a.addEventListener("click", function() { b.value = "test" });

}

 window.addEventListener('DOMContentLoaded', (event) => {
    var a = document.getElementById("pic");
    var b = document.getElementById("text");
    a.addEventListener("click", function() { b.value = "test" }); }
});