How to invoke Javascript addEventListener with setTimeout

Question

I invoked a callback onload and it worked but left a TypeError: Failed to execute 'addEventListener' on 'EventTarget': parameter 2 is not of type 'Object' in the console

document.addEventListener('load', setTimeout(callBack, 2000));

function callBack(){
    const data = JSON.parse(localStorage.data);
    const tbody = document.getElementById("info");
    for (let obj in data){
        let td = document.createElement('td');
        let text = document.createTextNode(`${data[obj]}`);
        td.appendChild(text);
        tbody.appendChild(td);
    }
};

There's a similar question here that prompted these changes:

document.addEventListener('load', function(){setTimeout(callBack, 2000)});

document.addEventListener('load', function(){setTimeout(callBack(), 2000)});

It doesn't display and I get no exceptions with the changes.

EDIT: On changing the event listener line, I get no data in my HTML- so callBack is not being handled or called.

Possible duplicate? [How to pass parameter to function using in addEventListener?](https://stackoverflow.com/questions/12024483/how-to-pass-parameter-to-function-using-in-addeventlistener) — Axekan, Sep 26 '22 at 19:47
document does not work this does: `window.addEventListener('load', () => setTimeout(callBack, 2000));` — mplungjan, Sep 26 '22 at 19:57
@VLAZ actually, nothing happens. I got neither data in my HTML nor error log in the console- I'm guessing ```callBack``` wasn't invoked or called — 23rdpro, Sep 26 '22 at 19:59
Maybe there is nothing in localStorage.data. Maybe your html doesn't like TDs that have no surrounding TR. — James, Sep 26 '22 at 19:59
Look in the console for errors if the localStorage call fails. You need to have data in there for it to work — mplungjan, Sep 26 '22 at 20:00
Why not just add `console.log("callback")` as the first line of `callBack` and see if it gets printed? — Heretic Monkey, Sep 26 '22 at 20:00

score 0 · Answer 1 · answered Sep 26 '22 at 20:31

With your sample code, you're calling a function and passing in that function's return value to the event listener.

You're supposed to pass in a function, and when the event occurs, the event listener executes that function for you.

window.addEventListener("DOMContentLoaded", function(e){
  setTimeout(callback, 2000);
});

function callback() {
  const data = JSON.parse(localStorage.data);
  const tbody = document.getElementById("info");
  for (let obj in data) {
    let td = document.createElement('td');
    let text = document.createTextNode(`${data[obj]}`);
    td.appendChild(text);
    tbody.appendChild(td);
  }
};

I changed it to ```window.addEventListener("load", () => {setTimeout(callBack, 2000)});``` that's because [WINDOW object and DOCUMENT object ARE NOT THE SAME!!!!!](http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/) — 23rdpro, Sep 26 '22 at 22:30

How to invoke Javascript addEventListener with setTimeout

1 Answers1