JavaScript getElementById 返回 null 错误?

标签 javascript dom

所以我刚开始使用 HTML 和 JavaScript,我认为尝试 iFrame 会很有趣。

但是我遇到了一个似乎无法解决的问题: 未捕获的类型错误:无法读取 null 的属性“值”

这是代码:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <script>
            var link = document.getElementById("LinkJ");
            var button = document.getElementById("ButtonJ");
            var surf = document.getElementById("SurfJ");

            function PressButton(){
                surf.src = link.value;
            }
        </script>
    </head>

    <body>
        URL:
        <input name="LinkN" id="LinkJ" type="url" value="http://www.bing.com/"></input>
        <button name="ButtonN" id="ButtonJ" onclick="PressButton()">Surf</button>

        <br><br>

        <iframe name="SurfN" id="SurfJ" style="position: absolute; height: 80%; width: 90%" src="http://www.bing.com/">
        </iframe>
    </body>
</html>

最佳答案

您的脚本在 DOM 渲染之前执行。将脚本移至 html 末尾或您正在使用的 DOM 元素之后。

或者您也可以将脚本更新为以下内容

<script>
    function PressButton(){
        document.getElementById("SurfJ").src = document.getElementById("LinkJ").value;
    }
</script>

关于JavaScript getElementById 返回 null 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31359387/

相关文章:

javascript - UJS + Bootstrap按钮加载

javascript - 如果单击了某个项目(并且之前已经将其添加到数组中),如何从数组中删除该项目?

javascript - 使用子字符串方法突出显示字符串中的文本

javascript - 在单个发布商页面上提供多个广告小部件

javascript - 简约的滚动 spy 将事件类仅更改为标签

javascript - 使用 Ajax 向经典 ASP 发送信息

javascript - DOM DocumentFragments 如何帮助优化 dom 操作?

php - 从 XML 节点 PHP DOM 中删除所有子节点

javascript - 选择长度与 options.length

android - XML 行为从 Android 2.3 更改为 4.1?