Hey, Scripting Guy! Question

Hey, Scripting Guy! How can I clear an HTA window?

-- DF

SpacerHey, Scripting Guy! AnswerScript Center

Hey, DF. Well, to tell you the truth, if you’d ever seen at least one of the Scripting Houses you wouldn’t be asking us if we knew how to clear a window; it’s pretty obviously some of us don’t. (In our defense, though, if we keep the window clean then birds have a terrible habit of flying headlong into it. Which, of course, is also why we don’t vacuum the rug very often: we don’t want birds flying headlong into the rug, either.)

We’re actually going to answer your question by showing you two scripts: one script that clears the entire window and another that clears only part of the window. Why are we going to do that? Well, we can’t tell you that just yet; that would spoil the surprise, wouldn’t it?

Let’s start off with a simple HTA, one that features a button that, when clicked, clears the entire HTA window:

<html>
<head>
<title>HTA Test</title>
<HTA:APPLICATION 
     ID="objTest" 
     APPLICATIONNAME="Clear Window"
     SCROLL="yes"
     SINGLEINSTANCE="yes"
>
</head>

<SCRIPT LANGUAGE="VBScript">
    Sub ClearWindow
        document.body.InnerHTML = ""
    End Sub  
</SCRIPT>

<body>
    <input id=runbutton type="button" value="Clear" onClick="ClearWindow">
</body>

You’re right: there isn’t much to this. We start off by specifying a title for our window, using this line of code:

<title>HTA Test</title>

We then have some optional lines of code that are used to configure various properties of the HTA itself. We won’t discuss those in any detail today; for more information you might check out the HTA Developers Center or the Scripting Week 3 webcast Going Beyond the Command Line with HTML Applications.

As you can see, the body of the HTA consists of a single element: a button labeled Clear:

<input id=runbutton  type="button" value="Clear" onClick="ClearWindow">

Click that button, and a subroutine named ClearWindow will fire up.

And what happens inside that subroutine? Not much; in fact, all we do is set the InnerHTML property of the document.body object to nothing (“”):

document.body.InnerHTML = ""

And that, in turn, clears the HTA window. You want to clear an HTA window? Then just set the document.body.InnerHTML property to an empty string.

But wait, don’t go yet: we need to emphasize that this really clears the HTA window. For example, here’s what our HTA looks like before we click the button:

HTA


And here’s what it looks like after we click the button:

HTA


The window’s been cleared all right: in fact, everything has been erased, including our Clear button. There will likely be times when you want everything - including your interface elements - to be erased. However, there will also be times when you just want certain items - say, data retrieved from a previous script - to be erased while other items (such as buttons) are left alone. So let’s show you a variation of this script, one that erases only a portion of the HTA window.

Note. Of course, you can always restore the user interface by pressing F5, thus refreshing the HTA window.

Here’s the revised code:

<html>
<head>
<title>HTA Test</title>
<HTA:APPLICATION 
     ID="objTest" 
     APPLICATIONNAME="Clear Window"
     SCROLL="yes"
     SINGLEINSTANCE="yes"
>
</head>

<SCRIPT LANGUAGE="VBScript">
    Sub ClearWindow
        DataArea.InnerHTML = ""
    End Sub  
</SCRIPT>

<body>
    <input id=runbutton  type="button" value="Clear" onClick="ClearWindow">
    <p>
    <span id=DataArea>This is the data area.</span>
</body>

For the most part we’ve done two things here. First, we added a <span> tag and given this span the id DataArea. A span, as you probably know, is a named-area of the HTA that we can dynamically modify; for example, using a script we can add text (and HTML formatting) to the span.

Or, we can clear the span of all text and HTML formatting. That’s the second change we made to our HTA: we’ve rewritten the ClearWindow subroutine so that instead of clearing the entire window it clears only the DataArea span:

Sub ClearWindow
    DataArea.InnerHTML = ""
End Sub

Why did we do that? Well, here’s what our revised HTA looks like when it first loads:

HTA


As you can see, our span (located just below the button) features the words This is the data area.

Now, here’s what the HTA looks like after we click the button:

HTA


Ah, now you get it: we cleared the DataArea, but left the window unchanged. That means our UI elements (in this simple example, that’s just the Clear button) are still there and still available for use.

And, yes, that also means that no birds will fly headlong into this HTA, either. One less thing to worry about!