I'm not able to iterate through the array

Question

https://code.sololearn.com/WsdmEIiGE7Y1/?ref=app

Answer 1

very few changes, to let one item at a time displayed at each click (but you must append the initial one to let it be displayed when array reach end ;P):

https://code.sololearn.com/Wi7iW37MTQIn/?ref=app

Answer 2

that was the minimal changes to make it work...

I guess you want to implement also previous and next buttons: next was obvious, as already implemented for "go ahead" button, but previous would require some additional changes/adjusments: the code for that (plus the handling of the initial item) is still ready, so feel free to ask for either help to done it by yourself or request for it ;)

however, I made it to be circular, but we can make it to not be, as well as other improvments ^^

Answer 3

Thanks visph

Answer 4

visph Sorry man..
And Thankyou so much for this one.
It's working more smoothly with this all in one function

Answer 5

I think you are correctly iterating your array, but you do it all at once at each button click... so you only see the last item displayed ^^

you must have a variable wich hold the current index, and update only once item at a time (click)...

Answer 6

or alternativaly, you must setTimeout() the update to make it automatically run, with some delay between each image ;P

Answer 7

visph i tried this.

var j=i;
var pre=document.getElementById('pre');
pre.addEventListener("click",function pre(){
document.getElementById('img').style.backgroundImage=arr[j][0];
document.getElementById('name').innerHTML=arr[j][1];
document.getElementById('para').innerHTML=arr[j][2];
j--;
});
But its not working as expected 😑

Answer 8

you should use the same variable index as used in next/go ahead function... to correctly continue to handle its behavior at any time ;)

also, you must handle the case where i==0: decrementing will make it -1 (then -2, -3...), which will result in index error ^^

in your "fun" (next/go ahead) function, I handled the case of index reaching end of array by using % operator with array length: in the reverse order that's a few less obvious, but a ternary operator should be enough:

i = i ? --i : arr.length-1;

or even:

i = (i || arr.length)-1;

however, you don't have to write a 2nd specific function to handle prev: both could be handled in only one, by passing a direction argument:

function fun(dir=1) {
i = (i+dir+arr.length)%arr.length;
/* your update stuff here, using i index variable */
}

from prev onclick: fun(-1), from next/go ahead onclick either fun() or fun(1) ;P

notice that I moved the i update at start, to avoid problems (meaning that i must be initialized with displayed data index)