document.getElementById（）返回null，一直都是null？

Question

这些问题有很多答案，但我仍然无法解决。抱歉，这是如此明显。当我一直使用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>

widget.html

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Widget</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body id="widget-body">

    <img id="pic" src="img/wi01.PNG" alt="trans_level_1">

    <script src="main.js"></script>
</body>

</html>

inside.html

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

main.js

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

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

}

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

当我使用document.getElementById时，我总是为null。请帮助！

Answer 1

第一个index.html文件没有id="pic"元素，因此一个文件将失败。

第二个widget.html文件没有id="text"元素，因此没有什么可单击的

第三个inside.html文件似乎运行正常（对于本示例，我不得不将javascript直接放在页面中，但是当我使用main.js文件在本地对其进行测试时，它也可以按预期工作。

每个HTML页面都应具有自己的js文件，具体取决于您要完成的工作？相同的示例不适用于您的所有示例。

<!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>
      window.onload = function() {
        var a = document.getElementById("pic");
        var b = document.getElementById("text");

        console.log(a, b);

        a.addEventListener("click", function() { b.value = "test" });
    }
    </script>
</body>

</html>

Answer 2

等待加载Dom内容。

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

document.getElementById（）返回null，一直都是null？

问题描述投票：-1回答：2

2个回答

最新问题

document.getElementById（）返回null，一直都是null？

问题描述 投票：-1回答：2

2个回答

最新问题

问题描述投票：-1回答：2