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

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

javascript html

Javascript 为什么按钮onclick事件不起作用？,javascript,html,Javascript,Html,我有一个带有两个按钮的html页面。在我的脚本中，我有用于这些按钮的onclick事件的函数，但是当我单击这些按钮时，什么也没有发生。在控制台中，我看到以下错误： TypeError:document.getElementById（…）为空在我的按钮功能行上我的脚本： var page = 0; var panel = 0; var panelNumber = [2,6,6,5]; window.addEventListener('load', findPage); function f

我有一个带有两个按钮的html页面。在我的脚本中，我有用于这些按钮的onclick事件的函数，但是当我单击这些按钮时，什么也没有发生。在控制台中，我看到以下错误：

TypeError:document.getElementById（…）为空在我的按钮功能行上

我的脚本：

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

var-page=0；
var面板=0；
var panelNumber=[2,6,6,5]；
window.addEventListener（'load'，findPage）；
函数findPage（）{
用于（面板=0；面板<面板编号[第页]；面板++）{
var elem=document.createElement（“img”）；
elem.setAttribute（“src”、“./Images/”+page+“+panel+”.jpg”）；
元素setAttribute（“宽度”、“100%”）；
文件.getElementById（“章节”）.appendChild（elem）；
}
};    
document.getElementById（“next”）.onclick=function（）{
如果（页码<面板编号.长度）{
page++；
findPage（）；
}    
};
document.getElementById（“第一”）.onclick=function（）{
如果（第！=0页）{
page=0；
findPage（）；
}    
};
document.getElementById（“previous”）.onclick=function（）{
如果（页面>0）{
第页--；
findPage（）；
}    
};

我的HTML:

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>
<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'），我已经这样做了。

您的代码在这一行失败

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

因为在脚本运行时找不到元素。将脚本放在

的末尾：

到目前为止，执行代码时没有在DOM中加载页面内容。在语句中添加事件处理程序时

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

您需要等待DOM生成。您应该使用event

当初始HTML文档已完全加载和解析时，将触发

DOMContentLoaded

事件，而无需等待样式表、图像和子帧完成加载

您将需要在

findPage（）

函数中包含所有

document.getElementById（“…”）.onclick

调用。这是否标记为jQuery，因为如果您实际使用jQuery，则不会出现这些问题？@RichLinnell，否。它标记为jQuery，因为我不知道jQuery是什么，并且建议使用该标记。我想我会把那个标签拿掉…很好的补充，我还没有考虑过那个潜在的问题！