TypeError：document.getElementById（...）为null

在我的按钮功能行上。

我的剧本：

var page = 0;
var panel = 0;
var panelNumber = [2,6,6,5];

window.addEventListener('load', findPage);

function findPage() {
    for (panel = 0; panel < panelNumber[page]; panel++) {
        var elem = document.createElement("img");
        elem.setAttribute("src", "../Images/" + page + "." + panel + ".jpg");
        elem.setAttribute("width", "100%");
        document.getElementById("chapter").appendChild(elem);
    }
};    

document.getElementById("next").onclick = function () {
    if (page < panelNumber.length) {
        page++;
        findPage();
    }    
};

document.getElementById("first").onclick = function () {
    if (page != 0) {
        page = 0;
        findPage();
    }    
};

document.getElementById("previous").onclick = function () {
    if (page > 0) {
        page--;
        findPage();
    }    
};

我的HTML：

<html>
<head>
    <link href="../css/bootstrap-theme.css" rel="stylesheet" />
    <link href="../css/bootstrap.css" rel="stylesheet" />
    <link href="../css/MyStyle.css" rel="stylesheet" />
    <script src="../Scripts/jquery-2.2.4.min.js"></script>
    <script src="../Scripts/bootstrap.js"></script>
    <script src="../Scripts/MyScript.js"></script>
</head>
<body class="container-fluid"> 
    <ul class="nav nav-pills navbar-fixed-top navbar-inverse">
        <li><button id="previous" class="btn btn-default">previous</button></li>
        <li><button id="first" class="btn btn-default" >first</button></li>
        <li><button id="next" class="btn btn-default">next</button></li>
    </ul>
    <div class="row"> 
        <div class="col-lg-2" id="left"></div>    
        <div class="col-lg-8" id="page">
            <div id="chapter"></div>
            <div id="comments"></div>
        </div> 
    </div>
</body>
</html>

我已经在这里滚动了很多相同的问题，但答案是window.addEventListener('load')，我已经做到了。

Answer 1

截至目前，代码的执行没有在DOM中加载页面内容。在语句

中添加事件处理程序时

document.getElementById("next").onclick = function () {

您需要等待DOM构建。您应该使用DOMContentLoaded事件

初始HTML文档完全加载并解析后会触发DOMContentLoaded事件，而无需等待样式表，图像和子帧完成加载。

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
    //Your code to bind event handler

    document.getElementById("next").onclick = function () {
    }
});

Answer 2

您的代码在此行失败

document.getElementById("next").onclick = function () {

因为在脚本运行时无法找到该元素。将脚本放在<body>：

的末尾

    </div>

    <script src="../Scripts/jquery-2.2.4.min.js"></script>
    <script src="../Scripts/bootstrap.js"></script>
    <script src="../Scripts/MyScript.js"></script>
</body>

为什么按钮onclick事件不起作用？

TypeError：document.getElementById（...）为null

2 个答案: