Why is this code not working?

Question

what's wrong in the below code?
https://code.sololearn.com/Wqm0rpZOlTQ1/?ref=app

Answer 1

The for loop doesn't wait for the button to be clicked. It is run to completion, and the global variable i becomes 100 at the end.

So when you do click the button, the background color is set as #0000100, which isn't really a color.

Possible fix: instead of a for loop, just increment i only when the button is clicked.

Does that make sense?

Answer 2

Kishalaya Saha Sorry, I had not checking the code date (and I will not: I believe you)

Answer 3

Actually, your while loop never end... as the condition is never reached (the i var is only incremented if the onclick event is fired/called, but that's never the case as the browser don't have time to display the button before the onload event is fired^^)

[edit]
If you had ran it in a browser, you need to kill/close at least the tab...
If you had ran it in the android app, you need to kill/close the app to be able to run any other web display inside it...

Answer 4

Kishalaya Saha In fact, the final color is set to #000090, wich is a valid color, as the while loop condition is i<100 (stricly less than, not less than or equals) ;)

Ravindra Desai Code replacement I suggest:
window.onload = () => {
var a = document.querySelector("button"),
d = document. querySelector("body"),
i = 0, s ='fc9630369c';
a.onclick = () => {
i = (++i)%s.length;
d.style.backgroundColor=`#00${s[i]}`;
}
};

Do an infinite loop over the char, decreasing then increasing (as default background color at start is white) and then doing it again, each time the button is pressed :)

Answer 5

visph the code was modified after my comment (you can compare the times). I talked about a for loop, and now there is a while loop. Earlier it did go up to i=100.

Answer 6

Yes, you increment i only when the button is clicked. But in EVERY ITERATION of the while loop, you're defining a NEW function that's supposed to be executed when the button is clicked. But that's how loops work: it won't wait for you to click the button to increment i. It would just go on forever as the condition i<100 always holds true, and we are stuck with nothing.

Define the onclick event only once: not within a for/while/do-while or any other sort of loop. Increment i there. If you don't want i to get to 100, just say so! Something like
if (i<90) {
i += 10;
}

Or you could also reset i once it reaches 100:
i += 10;
if (i==100) {
i = 10;
}

Does that make sense?

Answer 7

Yes, i is incremented only when button is clicked. And that is exactly why the while loop never ends, like visph explained. There's nothing to stop the flow of the loop.

Answer 8

Oh that's right! Now it did make sense😅.. thank you very much Kishalaya Saha and visph

Answer 9

Thanks visph and Kishalaya Saha for your help...but what's wrong if its a while loop? I am incrementing i after the button is clicked right?then there must be no errors...

Answer 10

Kishalaya Saha ,but i must be incremented ONLY when the function is called right? In this case when the button is clicked??? Until I click the button, the function onclick is not called and i must not be incremented before the function is called...where is it going wrong?