DEV Community

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

AndyBullet on October 26, 2019

Hi guys! I have a problem with JavaScript. HTML: https://pastebin.com/B9NvPcdq JavaScript: https://pastebin.com/jTXCBFRZ In this code when I click ...

Read full post

Ben Calder • Oct 26 '19

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

loop through an array of images
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 • Oct 26 '19

Can you also provide the html?

AndyBullet • Oct 26 '19

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

Saurabh Sharma • Oct 27 '19

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

AndyBullet • Oct 29 '19

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

Saurabh Sharma • Oct 30 '19

I will try

Saurabh Sharma • Oct 30 '19

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 • Oct 26 '19

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 • Oct 26 '19

So where should I put the line 9?

Dennis Ploeger • Oct 26 '19

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

AndyBullet • Oct 26 '19

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

Dennis Ploeger • Oct 26 '19

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 • Oct 26 '19 • 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.

AndyBullet • Oct 26 '19

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

Stawarz guillaume • Oct 26 '19 • 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.

crycx • Oct 26 '19

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

AndyBullet • Oct 26 '19

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 ...