Jump to content

Typing slider (cursor shows the next letter to match). Explanation of DOM manipulations.


xcislav

Recommended Posts

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"):length - 2[i + 2]the second:extraNodes > 2[pos + 2]and the third:(k - 1)and(k - 2)

<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></body>

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.

t.php

tt.php

Link to comment
Share on other sites

There is only one child node there, the <span> element. Inside the <span> element is one child node: a text node. What you need is to manipulate a string. You can only apply styles to HTML elements, not to text nodes.

 

You can use substring() to get a portion of a string.

// firstChild is the span// the firstChild of the span is a text node// the content of the text node is its node valuevar textContent = document.getElementsById("isdivNode").firstChild.firstChild.nodeValue;// Get all the letters in the string except the last two:textContent = textContent.substring(0, -2);
  • Like 1
Link to comment
Share on other sites

If you want to see what the structure is, use console.log to send the elements to the browser's developer's console so that you can inspect them. You can look at the childNodes property, for example, to see how many children there are and what they are.console.log(divNode);Or you can loop through and show each one:

for (var i = 0; i < div.childNodes.length; i++) {  console.log(divNode.childNodes[i]);}
Inside that loop, you can log divNode.childNodes[i + 2] to see what that is set to, etc. Use the console to see what your program is doing. You can even set breakpoints to make the code pause at a certain line so that you can check the values of all of the variables.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...