In this section we describe how JavaScript and the DOM are used to create the web page that produces the behavior at solve.html.
solve.html, shown below, uses the same table shown in HTML and the DOM except for the addition of style attributes incorporating CSS styles.

Note the JavaScript code:

       window.onload = function() {
           init();
       };
	
Each HTML document loaded into a browser window becomes an object accessible in JavaScript through the document object.

The document object represents the entire DOM node tree for a web page.

Elements of the node tree can be accessed through the document object's getElementById method.

Recall that the select element in solve.html was given the ID "selector".

The code below from solve.js uses this ID to retrieve the DOM node corresponding to this element and store it in a variable:

solve.html creates the select element at the bottom of the page, but it does not create the selection options.

That is the job of more code in solve.js, which must create new option elements corresponding to the FWGC and water jug problems.

New elements for the current web page can be created using the document object's createElement method.

The code below creates an array of problems and iterates through the array to create selection options and add them to the selector:

All HTML elements in the DOM have an innerHTML property that defines both the HTML code and the text that occurs between an element's opening and closing tag.

This section gives two examples.

The code below shows how innerHTML is used to display the correct problem name and introduction string in solve.html.

The currently selected problem is obtained by getting the value of the selectedIndex property of the select element and using it to index into the problems array.

Shown below is the tryMove function that is called when a user clicks a move button. (We describe how to create these buttons later.)

Messages may be displayed in response to move clicks using the displayMessage function, shown below.

displayMessage sets the innerHTML of a table row's th element.

Note that the current state of the problem, represented by a textarea element and set by the updateState function, must use that element's value property (innerHTML will not work).

This section describes how the various buttons in solve.html are created and given their behavior.
The Reset button is created statically in solve.html using the input element with button type.

Its behavior is determined by the JavaScript reset function given as the value of the onclick attribute:

   <input type="button" value="RESET" onclick="reset();"></input>
	
The reset function simply returns the problem to its initial state and updates the state display:

The move buttons are dynamically rendered by JavaScript code when the page is first displayed or the user selects a problem.

The createButton function, which is intended to be called while looping through a problem's move array, creates and returns a move button for a given move object:

The move buttons for a given problem are collected into a one-column table for display in solve.html.

This table's rows are also dynamically rendered by JavaScript code when the page is first displayed or the user selects a problem.

The code below shows the use of the DOM's appendChild method for two purposes:

  1. Creating a td element to be added as the only cell in a table row
  2. Creating a tr element to be added as a row in the table
When the user selects a different problem, the table of move buttons must have its rows removed before they can be replaced by those of the newly selected problem.

The DOM collects an HTML element's children, in this case the rows of a table, in a property called childNodes that is an array.

The clearTable function below uses an array object's length property to control a loop that removes rows one-by-one from the table.

solve.js