Update content of a div in HTA with external vbs-script

Viewed 275

I'm currently trying to figure out how to update a div-element in a hta-file. the hta calls a vbs-file where the actual script is running. My intention for the moment was to write the time from when the hta was launched into a div, replaceing the text that's already there. In the end this is going to be a tool for my companies department where we manage breaks in. But for now I can't even figure out how to write a text into a div...

I tried to get the element by document.getElementByID and by parent.dokument.getElementByID but it keeps telling me "object required" where i wrote "oRefreshed.innerHTML..."

Can somebody help me?

edit: author name

the files (please note that below the closing html-tag the vbs-file starts)

<html>
    <head>
        <HTA:APPLICATION 
             id="oHTA"
             APPLICATIONNAME="PausentoolByFF"
             BORDER="thin"
             ICON=".\data\icon.ico"
             MAXIMIZEBUTTON="yes"
             SCROLL="auto"
             SELECTION="no"
             SINGLEINSTANCE="yes"
             SYSMENU="yes"
             VERSION="0.1.0"
        />
        <title>
        Pausentool
        </title>
        <link rel="stylesheet" href=".\data\style.css">
        <meta name="author" content="">
        <meta name="version" content=oHTA.VERSION>
        <script Language="vbscript">
            Dim loaded
            loaded = True
            window.resizeTo 1100,620
        </script>
        <script language="VBScript" src=".\data\pausentool.vbs"></script>
    </head>
    <body>
        <p>
            <table>
                <tr>
                    <div class="content menu" id="admin">
                        <input type="button" class="button" id="adminButton" accesskey="a" title="Admin-Screen öffnen (Alt + A)" value="Administrieren">
                    </div>
                    <div class="content menu" id="getKP">
                        <input type="button" class="button" id="getKPButton" accesskey="p" title="Pausenkarte ziehen (Alt + P)" value="Pausenkarte">
                    </div>
                    <div class="content menu" id="refreshBtn">
                        <input type="button" class="button" id="refreshButton" accesskey="r" title="Pausentool aktualisieren (Alt + R)" value="Aktualisieren" onClick="window.location.reload()">
                    </div>
                    <div class="SLA">
                        <div class="content">
                            <span id="SLA1">Anzeige der</span><br>
                            <span id="SLA2">SLA-DATEN</span>
                        </div>
                    </div>
                    <div class="logo" id="logo">
                        <img src="./data/logo.png">
                    </div>
                    <div class="refreshed">
                        zuletzt aktualisiert:<br>
                        <div id="refreshed">noch nie (tbd)</div>
                    </div>
                    </td>
                </tr>
            </table>
        </p>
        <p>
            <table>
                <tr>
                    <th class="content">
                        <input type="button" class="button" accesskey="1" title="diesen Pausenslot w&auml;hlen (Alt + 1)" value="11:30 - 12:00">
                    </th>
                    <th class="content">
                        <input type="button" class="button" accesskey="2" title="diesen Pausenslot w&auml;hlen (Alt + 2)" value="12:10 - 12:40">
                    </th>
                    <th class="content">
                        <input type="button" class="button" accesskey="3" title="diesen Pausenslot w&auml;hlen (Alt + 3)" value="12:50 - 13:20">
                    </th>
                    <th class="content">
                        <input type="button" class="button" accesskey="4" title="diesen Pausenslot w&auml;hlen (Alt + 4)" value="13:30 - 14:00">
                    </th>
                    <th class="content">
                        <input type="button" class="button" accesskey="5" title="diesen Pausenslot w&auml;hlen (Alt + 5)" value="14:10 - 14:40">
                    </th>
                    <th class="content">
                        keine Mittagspause
                    </th>
                </tr>
                <tr>
                    <td class="content">
                        <table id="1">
                            
                        </table>
                    </td>
                    <td class="content">
                        <table id="2">
                            
                        </table>
                    </td>
                    <td class="content">
                        <table id="3">
                            
                        </table>
                    </td>
                    <td class="content">
                        <table id="4">
                            
                        </table>
                    </td>
                    <td class="content">
                        <table id="5">
                            
                        </table>
                    </td>
                    <td class="content">
                        <table id="0">
                            
                        </table>
                    </td>
                </tr>
            </table>
        </p>
    </body>
</html>


If loaded Then
    'do stuff
    sHour = Hour(Now())
    sMinute = Minute(Now())
    sSec = Second(Now())
    If Len(sSec) = 1 Then sSec = "0" & sSec
    If Len(sMinute) = 1 Then sMinute = "0" & sMinute
    If Len(sHour) = 1 Then sHour = "0" & sHour
    Dim oRefreshed
    Set oRefreshed = parent.document.getElementById("refreshed")
    oRefreshed.innerHTML = sHour & ":" & sMinute & ":" & sSec
Else
    Dim Msg, Style, Title
    Msg = "Dieses Script kann nicht alleine gestartet werden. Bitte nutze stattdessen die Pausentool.hta! Bei Fragen wende dich gerne an den Entwickler."    ' Define message
    Style = vbOKOnly + vbCritical + vbDefaultButton2    ' Define buttons
    Title = "falsche Datei"    ' Define title
    MsgBox Msg, Style, Title 'show Messagebox
    
End If```
1 Answers

You're getting an error because the VBScript code is running before the page is loaded. That code needs to be under "Sub window_OnLoad". Also, you can just reference "refreshed" directly. There's no need to use GetElementByID in this case. Using the same name for the class and the ID works fine, but I would avoid that for readability. Also, the HTA should have DOCTYPE and X-UA-Compatible declarations, otherwise, it's going to run in IE 5 mode. You also may need to use UTF-8 for special characters.

Here's a quick edit of your HTA with those changes (I put the VBScript code directly in the HTA, but it will also work fine if it's external).

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=9">
  <HTA:APPLICATION 
  id="oHTA"
  APPLICATIONNAME="PausentoolByFF"
  BORDER="thin"
  ICON=".\data\icon.ico"
  MAXIMIZEBUTTON="yes"
  SCROLL="auto"
  SELECTION="no"
  SINGLEINSTANCE="yes"
  SYSMENU="yes"
  VERSION="0.1.0"
  />
<title>
  Pausentool
</title>
<meta name="author" content="">
<meta name="version" content=oHTA.VERSION>
<script Language="vbscript">
window.resizeTo 1100,620
Msg = "Dieses Script kann nicht alleine gestartet werden. Bitte nutze stattdessen die Pausentool.hta! Bei Fragen wende dich gerne an den Entwickler."    ' Define message
Style = vbOKOnly + vbCritical + vbDefaultButton2    ' Define buttons
Title = "falsche Datei"    ' Define title
MsgBox Msg, Style, Title 'show Messagebox

Sub window_OnLoad
  sHour = Hour(Now())
  sMinute = Minute(Now())
  sSec = Second(Now())
  If Len(sSec) = 1 Then sSec = "0" & sSec
  If Len(sMinute) = 1 Then sMinute = "0" & sMinute
  If Len(sHour) = 1 Then sHour = "0" & sHour
  refreshed.innerHTML = sHour & ":" & sMinute & ":" & sSec
End Sub

</script>
</head>
<body>
<p>
<table>
<tr>
<div class="content menu" id="admin">
    <input type="button" class="button" id="adminButton" accesskey="a" title="Admin-Screen öffnen (Alt + A)" value="Administrieren">
</div>
<div class="content menu" id="getKP">
    <input type="button" class="button" id="getKPButton" accesskey="p" title="Pausenkarte ziehen (Alt + P)" value="Pausenkarte">
</div>
<div class="content menu" id="refreshBtn">
    <input type="button" class="button" id="refreshButton" accesskey="r" title="Pausentool aktualisieren (Alt + R)" value="Aktualisieren" onClick="window.location.reload()">
</div>
<div class="SLA">
    <div class="content">
        <span id="SLA1">Anzeige der</span><br>
        <span id="SLA2">SLA-DATEN</span>
    </div>
</div>
<div class="logo" id="logo">
    <img src="./data/logo.png">
</div>
<div class="refreshed">
    zuletzt aktualisiert:<br>
    <div id="refreshed">noch nie (tbd)</div>
</div>
</td>
</tr>
</table>
</p>
<p>
<table>
<tr>
<th class="content">
    <input type="button" class="button" accesskey="1" title="diesen Pausenslot w&auml;hlen (Alt + 1)" value="11:30 - 12:00">
</th>
<th class="content">
    <input type="button" class="button" accesskey="2" title="diesen Pausenslot w&auml;hlen (Alt + 2)" value="12:10 - 12:40">
</th>
<th class="content">
    <input type="button" class="button" accesskey="3" title="diesen Pausenslot w&auml;hlen (Alt + 3)" value="12:50 - 13:20">
</th>
<th class="content">
    <input type="button" class="button" accesskey="4" title="diesen Pausenslot w&auml;hlen (Alt + 4)" value="13:30 - 14:00">
</th>
<th class="content">
    <input type="button" class="button" accesskey="5" title="diesen Pausenslot w&auml;hlen (Alt + 5)" value="14:10 - 14:40">
</th>
<th class="content">
    keine Mittagspause
</th>
</tr>
<tr>
<td class="content">
    <table id="1">
        
    </table>
</td>
<td class="content">
    <table id="2">
        
    </table>
</td>
<td class="content">
    <table id="3">
        
    </table>
</td>
<td class="content">
    <table id="4">
        
    </table>
</td>
<td class="content">
    <table id="5">
        
    </table>
</td>
<td class="content">
    <table id="0">
        
    </table>
</td>
</tr>
</table>
</p>
</body>
</html>
Related