In several previous posts, I have given attention to the DOM. In today’s post, I would like to display a technique I sometimes use to debug the DOM itself.
With the DOM, it does not take long for things to get complex. We need to be able to dissect…slice and dice things up to fix any bugs we find. I have written about how to use alerts, document.writes and breakpoints…here is another method…
Utilize the DOM itself to tell you what is happening…We can use DOM methods like createElement to manufacture HTML code and then use appendChild. How? Glad you asked…
Let’s imagine we are working with an app that is like a ‘choose your own adventure’ book (I am dating myself there). So you are going through the application and clicking on your choices, but they are not making sense…there is a bug. We can capture the information in the app and write it directly to the page to understand what is occurring.
[code lang=”js”]
// Our HTML to make a choice in our story
<button id="decision1" onclick="changeStory(1)">Story Choice</button>
[/code]
So we have a button to click to make something happen.
[code lang=”js”]
// Div container to write DOM actions
<div id="history"></div>
[/code]
Now we have a place in our HTML to record actions from the DOM.
[code lang=”js”]
// Function that gets triggered with button click
function changeScene(decision) {
// decision argument carries our choice to
// evaluate (see HTML button code)
// Clear the story message
// storyMessage contains our text to display to our end user
var storyMessage = "";
// Decision variables to contain the next choices for the reader
var decision1 = "", decision2 = "";
// A switch statement to evaluate the logic of the reader’s choice
switch (curScene) {
// Beginning of our story
case 0:
curScene = 1;
message = "First message to reader.";
decision1 = "1st First Decision";
decision2 = "1st Second Decision";
// Show the second decision
document.getElementById("decision2").style.visibility = "visible";
break;
case 1:
// Case for result of first choice
if (decision == 1) {
curScene = 2
message = "Second message to reader.";
decision1 = "2nd First Decision";
decision2 = "2nd Second Decision";
} else {
curScene = 3;
message = "Third message to reader.";
decision1 = "3rd First Decision";
decision2 = "3rd Second Decision";
}
break;
// You could create more decisions/cases…
}
// Update the story description text and decisions based on button click
// Simply updates the story on the page for the reader
replaceNodeText("scenetext", message);
replaceNodeText("decision1", decision1);
replaceNodeText("decision2", decision2);
// Update the decision history
// This is where the DOM debugging comes into play
// Grab our history div
var history = document.getElementById("history");
// Make certain we are not at the beginning
if (curScene != 0) {
// Add the latest decision to the history
// Create a paragraph element
var decisionElem = document.createElement("p");
// Create text holding the information based upon the reader’s click
// We also append this to the paragraph
decisionElem.appendChild(document.createTextNode("Decision " + decision + " -> Scene " + curScene + " : " + message));
// Append the paragraph to the history div
history.appendChild(decisionElem);
} else {
// Clear the decision history
while (history.firstChild) {
history.removeChild(history.firstChild);
}
}
[/code]
I know that is several lines of code, but the decision history portion is the key. We grab the history div and put the information gathered based upon the end user’s selection. We then create HTML elements…in this case a paragraph tag and a text node. We then write that to the page. The result of the above code would be a log of sorts outputting to the page directly for you. This would allow you to follow the logic to catch and squash your bug.
Happy Coding!
Clay Hess
