Function not being called by document.addEventListener(‘load’

<script src="/blog/js/jquery.min.js"></script>
<script src="/blog/js/templatemo-script.js"></script>
<script src="/blog/js/jquery_ui.js"></script>

<script>
    function change_page(num) {
        <-- This function takes the num, and adds that to the page number in session storage, and -->
        <-- updates the page -->
    }
    function startup() {
        sessionStorage.setItem('page','1');
        document.getElementById('prev').addEventListener('click',prev);
        document.getElementById('next').addEventListener('click',next);
        change_page('0');
    }
    function prev() {
        change_page('-1');
    }
    function next() {
        change_page('1');
    }
    document.addEventListener('load',startup);
</script>

I’m currently trying to build a blog template. On my page, there are post slots that my function change_page loads blog posts onto depending on the current page in sessionStorage (num is added to the page in sessionStorage). There are also buttons with ids prev, next that do the obvious.

Currently, this code doesn’t work, since the function startup() is not being called. To see the full code, see this. To see the output, see this.

What am I doing wrong here? (And no, it has nothing to do with the fact that the numbers are strings).

Answer

The load event fires on the window, not the document.

You’re listening for it too low down.

---

Aside: there doesn’t seem to be any need to wait for all the document’s dependencies to load here. You should probably use the DOMContentLoaded event instead.

function change_page(num) {}

function startup() {
  console.log("The start up function runs");
  sessionStorage.setItem('page', '1');
  document.getElementById('prev').addEventListener('click', prev);
  document.getElementById('next').addEventListener('click', next);
  change_page('0');
}

function prev() {
  change_page('-1');
}

function next() {
  change_page('1');
}
window.addEventListener('load', startup);