Ahh. I was wondering why it was behaving a bit odd there.
Last night I was studying your counter and trying to understand how it was working. I'm still trying to understand how the first click of the previous word button gets the ctn value of 2. I can see how the rest is calculated (see comments in code below). I also added some lines to display the values with each click. Just to clarify, "moveBy" is just an arbitrary variable isn't it and not a method
Thanks for your help
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Japanese Vocab</title>
</head>
<body>
<h1>Japanese Vocab</h1>
<p id="japanese"></p>
<p id="english"> </p>
<button onclick="nextWord(-1)">Previous word</button>
<button onclick="showEnglish()">Answer</button>
<button onclick="nextWord(1)">Next word</button>
<p id="counter"> </p>
<p id="wordCount"> </p>
<p id="moveBy"> </p>
<script type="text/javascript">
var words =
[
["食べる", "to eat"], // 0
["読む", "to read"], // 1
["行く", "to go"], // 2
];
var wordCount = words.length;
var cnt=0;
function showEnglish()
{
document.getElementById("english").innerHTML = words[cnt][1];
}
function nextWord( moveBy )
cnt = ( cnt + wordCount + moveBy ) % wordCount;
/* Next word
0 time cnt = (0 + 3 + 0) =3 /3 = 0 remainder
1st time cnt = (0 + 3 + 1) =4 /3 = 1 remainder
2nd time cnt = (1 + 3 + 1) =5 /3 = 2 remainder
Previous word
1st time cnt = (0 + 3 + -1) =2???? /3 = 2 remainder
2nd time cnt = (2 + 3 + -1) =4 /3 = 1 remainder
3nd time cnt = (1 + 3 + -1) =3 /3 = 0 remainder
*/
document.getElementById("japanese").innerHTML = words[cnt][0]
document.getElementById("english").innerHTML=' ';
document.getElementById("counter").innerHTML="counter = "+ cnt;
document.getElementById("wordCount").innerHTML="wordCount = " + wordCount;
document.getElementById("moveBy").innerHTML="moveBy = " + moveBy;
}
nextWord(0); // gets it started
</script>
</body>
</html>