This is a simple set of files to show accessing DOM elements, first the HTML
The only things really of interest here are the heading element on line 8 which has the id attribute of “Head” and the script on line 9. Everything of interest happens in the script. What happens when the browser reads this HTML file to display it first creates an internal data structure it can work with more easily than the text. The book describes this in much more detail on pp 238.
Here’s what hovering over the HeadE variable looks like after execution stops at the debugger line. All these items in the displayed list are properties (data items) belonging to the Head DOM element that is referenced by the HeadE variable.
This is going to be used for a simple (too simple!) interactive system modeling ice cream eating.
To start, at line 9 we change the message to show how many scoops are left by setting the innerHTML of the msgE variable. The msgE variable contains a reference to the Msg paragraph because we loaded it at line 3, so anything that paragraph can do, we can do it through the msgE variable. In this case we’re setting the text for it.
Lines 11 – 15 set up the list paragraph to have an entry for each remaining scoop which is updated on each iteration of the while loop (line 8 – 20). Rather than interact with the List paragraph repeatedly, this code uses the innerTxt variable to build up the output text. On line 11, the innerTxt variable is loaded with an empty string to be sure there’s nothing left in it from the previous iteration of the while loop. Then lines 12 – 14 fill the innerTxt variable with a name for each remaining scoop using a for loop which counts up from 1 to the value in scoops. Notice that the end test is idx <= scoops. If it were idx < scoops, it wouldn’t do the final value, it would stop on the next to last scoop. Finally, on line 15, the string just built up is put into the List paragraph.
Line 17 puts up an alert box to let the user interact with the program. In reality, this is mainly there to slow down execution of the program. If it weren’t there and the loop just ran without any kind of interaction it would run so fast that the user couldn’t see it change, it would appear to be done immediately.
After the scoops variable has been decremented to zero on line 19, the while loop ends and the final state is shown by lines 21 and 22.
Here’s what this looks like the first time through the while loop:
Each time through the loop, this alert box will pop up and after the user clicks on OK one scoop will be removed and it will show the dialog again.
This works, but is really obnoxious! To make it a bit less so, we can use a callback.
Functions are discussed in the book on page 83, but for what we’re doing, the callback we need is pretty simple.
There are two functions here, repaint on lines 11 to 29 and catchClick on lines 31 to 34. The catchClick function is the callback and is put into the onclick property of the Msg paragraph on line 8. The repaint function actually does the changes to the innerHTML of the Msg and List paragraphs so the user can see what’s going on. Having all the repainting code in a function rather than repeated multiple times in the code is good coding practice because it keeps it all in one place. Not only is it easier to write once, but if you decide to change how the display is done, you just have to get it right once!
On line 8 a reference to the repaint function is put into the onclick property so onClick is called whenever the Msg paragraph is clicked on.
Line 9 does the first paint of the screen to show the initial state of everything.
When the Msg paragraph is clicked, catchClick is called, on Line 32 it first decrements the scoops variable, then calls the repaint function to show the user the new state.
Notice the if else in repaint. Line 12 is for normal cases where there are scoops left, line 21 is for the case where there are no more, and line 25 is for everything else, i.e. where the scoops variable has gone negative.
Putting a debugger statement at line 32 allows single stepping through all this. Here’s what it looks like on the first click.
You can now step through the code to watch how it executes, however, to follow the execution into the repaint function, when you get to that line, use the Step Into icon rather than the usual Step Over.
If you do that on line 34, you’ll wind up inside the repaint function and you can step through that to see how it works. If you’re in a function and have seen enough but want to get back to the place where the function was called, you can use the Step Out debugger icon. It lets the function complete normally and stops execution at the next statement after the function call.