What am I doing wrong

Question

Why is my code not repeating every second?
https://sololearn.com/compiler-playground/WjVioKkasS4Z/?ref=app

Thanks

Answer 1

/*
1. You can only access an html element onve the body is fully loaded, hence onload().

2. You only get the seconds once, but you should query it on each time interval. I put it all in an update() function.
*/
window.onload = () => {

function update() {
let dat = new Date();
let gs=dat.getSeconds();
const id=document.getElementById("id");
id.innerText = gs;
}

let time =()=>{update()};
setInterval(time,1000);
}

Answer 2

Bob_Li Their code has changed from what was there originaly. Lisa solved both issues.

Answer 3

Bob_Li yes I agree that is true.

Here is the original code.

let dat = new Date;
let gs=dat.getSeconds();
const id=document.getElementById("id");

let time =()=>{id.innerText=gs};
setInterval(time,1000);

Answer 4

A few people have investigated loading orders before.

I don't know if these are still up-to-date for the playground, though.

https://sololearn.com/compiler-playground/Wa16A20a6a23/?ref=app

Answer 5

Chris Coder
I gathered as much.😉 I was just addressing the tone of doubt from:

"But I don't understand why you always insist on windows.onload it ALWAYS works for me without it."

Well, it does not work in Sololearn's js tab if you're trying to access DOM elements before it is loaded.

Answer 6

Bob_Li
I just commented out the window.onload function and it is working perfectly fine for me in Sololearn js tab. Maybe it matters that I am on iOs. I don’t know. Try it and see if it works for you also. I just can’t understand how adamant everyone is about this. Yes, I respect that you guys know WAY more than me but I see it working with my own eyes so what is going on?

The original code was on top.I actually kept it there so that anyone coming afterwards can see it and understnad what my question was.

Why did you think I was looking for a random result? There wasn’t any randomness here…

Answer 7

Zvi Your code does not work on android

Answer 8

Chis_ coder
Interesting.
Can someone else on iOS confirm whether it works for them?

Answer 9

Bob_li
What happened was that I was just trying out setInterval so I tried it on Date. Which didn’t work as expected. So I reached out and Lisa explained what I was doing wrong. Then, just for the fun of it, I tried out the tenerary statement because I never actually used it in a code before. But yeah, there is no need to get it to alternate between odd and even like that. I wa just experimenting with different concepts that I learnt about.

Answer 10

Lisa
Wow! Thanks for finding that! This was making a little crazy! I’ll try to remember inthe future when asking questions to use the window.onload so that Android users can run it right away.

Answer 11

Hey Zvi
I want to add a little context to Lisa's response.

You were on the right path, but you made a small mistake. You got the seconds the first time but that was the only time. The fix was to just put the "gs" variable inside the "time" function. So that the interval could call it more than once.

Without changing your code very much it can be done like this.

Original Code

let dat = new Date;
let gs=dat.getSeconds(); // Gets seconds once
const id=document.getElementById("id");
let time =()=>{id.innerText=gs};
setInterval(time,1000);

After 

const id = document.getElementById("id");

let time = () => {

    let dat = new Date;

    let gs=dat.getSeconds() // Refresh gs every time time() is called

    id.innerText = gs;

};

setInterval(time, 1000);
https://sololearn.com/compiler-playground/WyekqT6NA9Nl/?ref=app

Answer 12

Thanks. But I don’t understand why you always insist on windows.onload it ALWAYS works for me without it. I’m not asking for an explanation about what it does. I know that already, I just think it’s odd that I have never had a problem yet you feel it’s so important. Maybe you need it more complex cases and you feel it’s a good idea to get in the habit i.e. best practice.
Anyway I changed the code a bit to alternate between odd and even.
Thanks again.

Answer 13

Zvi
Javascript can only access DOM elements only after the html is fully loaded. Unfortunately, Sololearn's js tab puts the js script at the head, or perhaps at the top of the body, not sure here, but it gets loaded and run before the document's html loads. That's why you get those error messages. So we need to enclose DOM accessors inside the onload function to make sure those are executed only after the html is loaded.
Your code is indeed running and updating every second.
I simplified your code and added a display for getSeconds.
What you get from setInterval is a regular timestamp from new Date. So it will be a regular alternation of odd and even as the second is updated.
Perhaps you were expecting a random result? If so, this is not the way to get it. There is no randomness here ...

https://sololearn.com/compiler-playground/W6GI3F510278/?ref=app

Answer 14

Zvi
maybe there is a difference with the behavior in ios and android devices. I did not consider that.
Also, sorry for misunderstanding that you were expecting random result. But from the way you set up your code, I wrongly assumed that it was the behavior you were expecting. Using Date gave me the impression that you were sampling the numbers , but setInterval defeats that.
Using Date is unnecessary if you only want odd even alternations. I also provided a css only way to do the same thing.

Answer 15

Nothing much, just use window.onload=()=>{

// Your code

}

There ....

It's working then.... I tried 🙂