Today I found an article about making a GUI using HTA: "Extreme Makeover: Wrap Your Scripts Up in a GUI Interface". This inspired me to play a little with the innerHTML attribute.
The script looks like this:
<?xml version=1.0" encoding=utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>Dynamic Document</title>
<hta:application id="htaDynamicDocument" applicationname="DynamicDocument" />
<style>
h1, h2, p { font-family:sans-serif }
</style>
</head>
<script type="text/jscript" language="jscript">
function newContent() {
var markup = "<p>Navigare necesse est!<p>"
return markup;
}
function jsContent() {
myArea.innerHTML = "<h2>jsContent</h2>" + newContent();
}
</script>
<script type="text/vbscript" language="vbscript">
Sub vbContent_onclick
markup = "<p>Vivere non est necesse,</p>"
myArea.innerHTML = "<h2>vbContent</h2>" + markup + newContent()
End Sub
</script>
<body>
<h1>Dynamic Document</h1>
<input type="button" value="JScript content" onclick="jsContent()">
 
<input type="button" value="VBScript content" name="vbContent">
<span id="myArea"></span>
<p style="font-size:smaller">© 2008, Niels Grove-Rasmussen — SQLAdmin.dk</p>
</body>
</html>
An execution of the script starts like this:
Clicking "JScript content" alter the document to this:
Clicking "VBScript content" alter the document to this:
If "JScript content" is clicked again, the document looks like the second image.
The trick is in two parts:
- The span-section with the identifier "myArea".
- Adding a string to the innerHTML attribute of the span-section.
Posts
