I would like to trigger a timer to run upon my page loading for the first time.
This is what I have tried:
let countdown;
...
const buttons = document.querySelectorAll("[data-time]");
...
function timer(seconds) {
// clear any existing timers
clearInterval(countdown);
const now = Date.now();
const then = now + seconds * 1000;
displayTimeLeft(seconds);
displayEndTime(then);
...
function startTimer() {
const seconds = parseInt(this.dataset.time);
timer(seconds);
}
...
window.addEventListener('load', buttons[0].addEventListener('click', startTimer).trigger('click'))
I get the error:
Uncaught TypeError: Cannot read properties of undefined (reading 'trigger')
There is an error because addEventListener doesn't return anything and also trigger() a jQuery function that clicks a button.
Instead you can use .click()
window.addEventListener('load', buttons[0].click())
The easiest way would be doing like so :
window.addEventListener('load', startTimer)
I am not sure why you want to trigger the click event on the button, but if you have to, you should do something like that :
window.addEventListener('load', () => {
buttons[0].addEventListener('click', startTimer)
const event = new Event('click')
buttons[0].dispatchEvent(event)
})
The error you have is due to the fact that addEventListener doesn't return anything having a method called trigger (it doesn't return anything at all).
But again, it should be enough to pass startTimer as a callback to the load event listener, no need to nest an additional event listener and trigger the click event on it.