JavaScript Dynamic HTML Primer
How To Write DHTML with CSS, JavaScript Handlers and Input Buttons
This JavaScript how-to tutorial teaches the use of dynamic HTML in documents with style sheets, using input buttons, onClick handlers & HTML manipulation with JavaScript.
This article details how to use JavaScript programming to create dynamic HTML (DHTML) pages. The technique shown here illustrates the following key DHTML CSS JavaScript principles:
- Dynamic document creation with onLoad;
- Button handling with onClick;
- Population of DHTML styles with JavaScript;
- Manipulation of the JavaScript DOM.
The generic solution given at the end shows how to create a document programmatically, and use the input control that is created within it to set the contents of a div tag, using a JavaScript function. A reasonable JavaScript programmer should be able to use this technique to create dynamic web pages and web interfaces such as JavaScript Shopping Carts.
The CSS Part
The fist item that is required is a simple CSS element to contain the HTML that the JavaScript function will populate. This can be inserted in the main HTML document, or it can be automatically generated using a JavaScript function when the page is loaded.
</div>
This div has two important attributes:
- It has a unique id property;
- It is initially empty, and hence invisible.
When the appropriate JavaScript function is called, we shall populate the div element with HTML.
The JavaScript Part
In the function which is designed to update the div area of the web page, there needs to be some way to reference the div. This is done through the JavaScript Document Object Model (DOM). This contains a function getElementById which can look up a CSS element with a unique id. This is coded as follows:
The reader will note that, given the object, the innerHTML property can be set to change the div content. The above needs to be contained inside a JavaScript function that is called from the main document when a button is clicked, or another action takes place.
The Interactive Part
In order to react to a click from the page, it is necessary to create a JavaScript function and attach it to the onClick handler of the relevant control. The code for this is as follows:
When the button is clicked, the click_handler is called, and the function executed. For an example of a generic handler, please see below.
A Generic Approach
The generic page layout should be something along these lines:
<head>
<script src="dhtml.js"</script>
</head>
<body onLoad="generateHTML('test title');">
If you can see this, then your browser does not support JavaScript!
</body>
</html>
The handler can be made generic, so that it can be used with multiple controls:
document.getElementById(button.name).innerHTML = '<i>'+button.value+'</i><br/><br/>';
// Normally we would use a switch or if statement to test the value of
// the button associated with the button.value property
}
Finally, the onLoad script generates the initial page, and all the controls - it could be made generic too and have more parameters passed to it:
var docHTML = '<h1>'+title+'</h1>'; // Add your own class= here
docHTML += "<div id='my_div'> <br/></div>";
// The interactive button
docHTML += "<input type='submit' value='Click Me' onClick='click_handler(this);' name='my_div'>"
document.body.innerHTML = docHTML;
}
Uses
One use for this technique is in building JavaScript Shopping Carts.
