DEV Community

AndyBullet
AndyBullet

Posted on

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?

Top comments (17)

Collapse
 
blindfish3 profile image
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 ;)

Collapse
 
itsjzt profile image
Saurabh Sharma

Can you also provide the html?

Collapse
 
andybullet profile image
AndyBullet

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

Collapse
 
itsjzt profile image
Saurabh Sharma

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

Thread Thread
 
andybullet profile image
AndyBullet

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

Thread Thread
 
itsjzt profile image
Saurabh Sharma

I will try

Thread Thread
 
itsjzt profile image
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/

Collapse
 
dploeger profile image
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.

Collapse
 
andybullet profile image
AndyBullet

So where should I put the line 9?

Collapse
 
dploeger profile image
Dennis Ploeger

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

Thread Thread
 
andybullet profile image
AndyBullet

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

Thread Thread
 
dploeger profile image
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.

Collapse
 
guillaume profile image
Stawarz guillaume • Edited

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.

Collapse
 
andybullet profile image
AndyBullet

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

Collapse
 
guillaume profile image
Stawarz guillaume • Edited

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.

Collapse
 
crycx profile image
crycx

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

Collapse
 
andybullet profile image
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 ...