javascript - How do I check my condition on an if statement to see if it is working correctly? -

i'm trying make type of circular display cycles through series of values moving text elements within svg file. uses hammer.js library , uses drag event. values can go in either direction. have working degree. last value shown array, goes beginning of array first values. or vice-versa.

var  keyarray = ["c","c#","db","d","d#","eb","e","f","f#","gb","g","g#","ab","a","a#","bb","b"]; 

this array. here how wrap past end of array , beginning.

** per request of few commenters , suggested solution nina, have modified code below reflect suggestions. have added few more lines clarity of happening overall.**

var delta = keyarray.length - 5; // can constant, positive    for(i=0;i<5;i++){   //5 svg text element containing 5 musical keys   keys = document.getelementbyid("keys"+i);   //ev.deltax change received hammer pan event   //text element moves relative original starting x   keys.setattribute("x",startingspots[i]+ev.deltax%150);   currentx=keys.getattribute("x");   currentedgeindex=keyarray.indexof(keys.textcontent);        //this if appears failing.     if (keys.getattribute("x")>=565){     keys.setattribute("x",currentx-150);     keys.textcontent = keyarray[(currentedgeindex + delta) % keyarray.length];   }   } 

with suggested changes, removed number() calls implementing modulus wrapper. behavior still erratic. on example below, if pan right, first text element reaches 565, meets condition if, moved left 150.

what should next change textcontent next appropriate value in array. however, becomes erratic, no longer past 565 not meet condition of if statement, text changes @ every increment of pan event if were.

i sure not seeing simple causing trouble not sure is.

the array appear circling correctly, though i'm still not sure "how can check see if if statement being correctly evaluated , met?"

the project can viewed here. http://codepen.io/cmgdesignstudios/pen/zrmqae?editors=1010

* edit solution * nina suggested problem lie in handling of touch event. after further investigation, found correct. had been moving object relative starting position , deltax touch event. trying change current position moving left rather adjusting starting position.

so replaced

keys.setattribute("x",currentx-150); 

with

startingspots[i]-=150; 

this kept movement relative starting position , deltax of touch event.

please delete number(...) casting it's not necessary. ...length returns number , result of calculation number too.

your actual key feature move 5 entries down, , can achieved wit simple addition , modulo, keep value in specific range, like

keys.textcontent = keyarray[(keyarray.length + currentedgeindex - 5) % keyarray.length]; 

further simplified can calculation lead add positive number of

delta = keyarray.length - 5; // can constant, positive keys.textcontent = keyarray[(currentedgeindex + delta) % keyarray.length]; 

and make modulo out of it.