Menu
I need to cut the program to the final logic cut. It’s now ~10 times smaller, although it’s as far as I could get in my understanding now.
Given two identical text strings. When you write in <input> you should write letters which have to be identical to the given line. And while you’re typing the cursor moves until the excercise_results().
My program is still big, and I need some help in understanding it’s actions. I know that each text contains a final dot and a space after it. But I couldn’t link this with the number “2” in for loop (after hiding the color of the <p >passage -…textDecoration “none”):
[B]length – 2
[i + 2]
the second:
[B]extraNodes > 2
[pos + 2]
and the third:
[B](k – 1)
and
[B](k – 2)
[CODE]<body>
<p id=”isdivNode”><span>Staff. </span>
</p>
<form>
<input size=”55″ onkeypress=”compare(event)”>
</form>
<script>
var strtest = “Staff. “;
divNode = document.getElementById(“isdivNode”);
var xp = 0;
deep = true;
divNode.childNodes[0].style.textDecoration = “none”;
for (i = 0; i < strtest.length; i++) {
if (i < divNode.childNodes.length – 2) {
if (divNode.childNodes[i + 2].nodeType == 1) {
divNode.childNodes[i + 2].firstChild.data = strtest.charAt(i);
}
} else {
myNode = divNode.firstChild.cloneNode(deep);
myNode.firstChild.data = strtest.charAt(i);
divNode.appendChild(myNode);
}
}
extraNodes = divNode.childNodes.length – strtest.length;
pos = strtest.length;
while (extraNodes > 2) {
divNode.childNodes[pos + 2].firstChild.data = “”;
pos++;
extraNodes–;
}
divNode.childNodes[0].style.color = “white”;
document.forms[0].elements[0].value = “”;
function compare(e) {
var k = strtest.length;
if (xp < (k – 1)) {
var keyChar = String.fromCharCode(e.which);
if (strtest.charAt(xp) == keyChar) {
divNode.childNodes[xp + 2].style.textDecoration = “none”;
xp += 1;
if (xp > (k – 2)) excercise_results();
divNode.childNodes[xp + 2].style.textDecoration = “underline”;
}
}
}
function excercise_results() {
confirm(“fin”);
}
</script>
I’m not at all experienced with DOM. It’s hard for me to link conditional logic with the DOM manipulations. And I can’t cut the program anymore (to have one/two “straight” conditions to see how it’s work and logic) – to get the cursor just pointing to another character to match.
Thanks in advance.