如何检查if语句的条件以查看其是否正常运行？

Question

I'm trying to make a type of circular display which cycles through a series of values as well as moving text elements within an svg file. It uses the hammer.js library and uses the drag event. The values can go in either direction. I have it working to some degree. As the last value is shown from an array, it goes back to the beginning of the array to get the 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 is my array. Here is how I wrap it past the end of the array and back to the beginning.

** As per the request of a few commenters and the suggested solution by Nina, I have modified the code below to reflect their suggestions. I have also added a few more lines for clarity of what is happening overall.**

var delta = keyArray.length - 5; // can be constant, it is always positive  

for(i=0;i<5;i++){
  //5 svg text element containing 5 musical keys
  keys = document.getElementById("keys"+i);
  //ev.deltaX is the change received from the hammer pan event
  //text element moves relative to its original starting X
  keys.setAttribute("x",startingSpots[i]+ev.deltaX%150);
  currentX=keys.getAttribute("x");
  currentEdgeIndex=keyArray.indexOf(keys.textContent);    

  //This if is what appears to be failing.  
  if (keys.getAttribute("x")>=565){
    keys.setAttribute("x",currentX-150);
    keys.textContent = keyArray[(currentEdgeIndex + delta) % keyArray.length];
  }  
}

With the suggested changes, I removed the Number() calls as well as implementing the modulus for the wrapper. The behavior is still erratic. On the example below, if you pan to the right, as the first text element reaches 565, it meets the condition for the if, is moved back to the left by 150.

What it should do next is to change the textContent to the next appropriate value in the array. However, this is where it becomes erratic, it is no longer past 565 so it does not meet the condition of the if statement, but the text changes at every increment of the pan event as if it were.

I am sure I am not seeing something simple that is causing the trouble but not sure what it is.

The array does appear to be circling correctly, though I'm still not sure "How can I check to see if the if statement is being correctly evaluated and met?"

The project can be viewed here. http://codepen.io/cmgdesignstudios/pen/zrmQaE?editors=1010

* Edit with solution * Nina suggested the problem lie in the handling of the touch event. After further investigation, I found she was correct. I had originally been moving the object relative to its starting position and the deltaX from the touch event. I then was trying to change the current position by simply moving it back to the left rather than adjusting the starting position.

So I replaced the

keys.setAttribute("x",currentX-150);

with

startingSpots[i]-=150;

This kept the movement relative to the starting position and the deltaX of the touch event.

Answer 1

Please delete the Number(...) casting where it's not necessary. ...length returns always number and the result of calculation is a number too.

Your actual key feature is to move 5 entries down, and this can be achieved wit a simple addition and a modulo, to keep the value in a specific range, like

keys.textContent = keyArray[(keyArray.length + currentEdgeIndex - 5) % keyArray.length];

Further simplified can this calculation then lead to just add a positive number of

delta = keyArray.length - 5; // can be constant, it is always positive
keys.textContent = keyArray[(currentEdgeIndex + delta) % keyArray.length];

and make the modulo out of it.