Why is are button onclick event not working?

Question

I have an html page with two buttons. In my script I have functions for those button's onclick event, but when I click on those buttons, nothing happens. In the console I see the following error:

TypeError: document.getElementById(...) is null

on the line of my button function.

My Script:

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();
    }    
};

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

I've already scrolled through a lot of the same question here, but the answer was window.addEventListener('load'), and I already did that.

You will need to include all the `document.getElementById("...").onclick` calls in your `findPage()` function. — Titus, Aug 22 '16 at 07:56
Is this flagged as jQuery because if you actually used jQuery then you wouldn't have these problems? — Rich Linnell, Aug 22 '16 at 07:57
@RichLinnell, No. It's flagged as jquery because I didn't know what jquery is, and that tag was suggested. i guess I'll take that tag off... — MJH, Aug 22 '16 at 08:16

score 3 · Accepted Answer · answered Aug 22 '16 at 07:55

As of now the code is executed without page content be loaded in DOM. When you are adding event handler in statement

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

You need to wait for DOM to build. You should use DOMContentLoaded event

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

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

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

score 1 · Answer 2 · answered Aug 22 '16 at 07:54

1

Your code fails at this line

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

Because the element can't be found at the time your script runs. Place your scripts at the end of your <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>

answered Aug 22 '16 at 07:54

baao

62,535
14
113
168

Great addition, haven't thought about that potential issue! – OldMcDonald Mar 08 '18 at 14:26

Why is are button onclick event not working?

TypeError: document.getElementById(...) is null

2 Answers2