JavaScript: I have a problem to set the conditions of the beginnings of the loops.

Hi guys! I have a problem with JavaScript.
HTML: https://pastebin.com/B9NvPcdq
JavaScript: https://pastebin.com/jTXCBFRZ
In this code when I click the button of the HTML page, if "Number" element (a paragraph in the HTML page) has 0 in the content of the text, the first array of images will start, and the
content of "Number" element will be changed to 1.
And so far it works.
But I want that when I click for the second time the button, if the content of the text of "Number" element is 1, the second array of images will start, but it doesn't work. Can you tell me why?

Comments

[Ben Calder]

From what I can see you have a couple of things you're trying to achieve here:

1. loop through an array of images
2. change the index of the looped image array each time the button is pressed

I'd suggest keeping the function that loops through the images separate - especially if it's using setTimeout - and add a separate click-handler function. The click handler can set the appropriate value of n (give this a more meaningful name! - e.g. imagesIndex) and then start the loop function.

I suspect you may have added the confusing/conflicting set of conditions to handle interruption of the loop. You should be able to simplify this if you instead simply stop the loop and start again with updated variables.

In your click handler you could use clearTimeout to stop any currently running loop.

If you post any follow-up questions I'd suggest using a service like jsfiddle, codepen etc. so we can see running code directly ;)

[Saurabh Sharma]

Can you also provide the html?

[AndyBullet]

I did. Now in the post there is also the HTML.

[Saurabh Sharma]

I will not be a able to debug it today, its Diwali 🎉. Sorry

[AndyBullet]

Hi! Today will you be able to solve my problem?

[Saurabh Sharma]

I will try

[Saurabh Sharma]

hey, @andybullet I wasn't able to get this working from your javascript code but I managed to make it work 😊.

codepen.io/itsjzt/pen/OJJxBra?edit...

This code includes some newer javascript features like async-await so feel free to ping me if something feels out. I have heavily commented code/

[Dennis Ploeger]

Doesn't line 9 exit the function when the number element is something else than 0? That would be the case on the second click.

[AndyBullet]

So where should I put the line 9?

[Dennis Ploeger]

Perhaps you could just make it broader so it accepts the values 0 and 1.

[AndyBullet]

Yes, I understood it. I would like to know how to do it.

[Dennis Ploeger]

Well, like this for instance:

let currentNumber = document.getElementById('Number').textContent;
if (currentNumber !== '0' && currentNumber !== '1')
  return;

It's not optimal, just for demonstration purposes.

[Stawarz guillaume]

If I read it right, you put an id="Numero" on the html code and try to get an element by id "Number" in js.
Can't match it.

[AndyBullet]

Do not take it, is an error that I do in pastebin.

[Stawarz guillaume]

Then I think most of the problem is the "return" you've put in each condition.
return put you out of your function.
The problem is you put two nested conditions, and in either of them the last instruction is return. So, before js parser can go further in the function, you give it the command to stop executing the function.
So it can never reach the last lines.
To find the answer, use the devtools of your browser. If you inspect your page and go to the debug section, you can put a mark on the js code and execute it step by step... this way you can see which part of your function is "read" by the js parser and which is not.

[crycx]

Can you please tell, what are you trying to achieve? What does it have to do?

[AndyBullet]

Now I included also the HTML in the post.
I want to make different arrays of images active based on the number written in the paragraph. If the number is 0 an array starts, if the number is 1 another one starts, etc ...