Assign the contents of a span tag to a variable

I am experimenting with HTA's and have encountered an issue while testing. Below is the code I am currently working with:

<script language="VBScript">
Public Game

Sub window_onload()
    Game="Help"
    sGame.body.InnerHTML=Game
    sName.body.InnerHTML=Game
End Sub

Sub strTest
    Game="Test"
End Sub
</script>

<body bgcolor="#42732D">

<div style="position:relative;
    text-align:center;
    top:45px;">

<span id = "sName" style="text-align:center;
    font-family:Small Fonts;
    font size:65px;
    z-index:1;
    color:#1C2433">

Yes

</span>

<span id = "sGame"
style="text-align:center;
position:absolute;
left:-4px;
font-family:Small Fonts;
font size:65px;
z-index:15;
color:#1094AF">
</span>
</div>

<input type="button" style="font-family:Small Fonts; font size:30px; color: white; background-color:grey" value="Testing" name="bTest" onclick="strTest">
</body>

My goal is to assign the same variable to two spans as a workaround to style the text differently within each span (to create a 3D effect). However, when executing strTest, which should update the spans' text to reflect the current value of the variable Game, nothing seems to change. How can I dynamically alter the content of a span using a variable?

Answer №1

<span> elements do not possess a body property. Simply utilize the innerHTML property instead.

Replace:

Sub window_onload()
    Game="Help"
    sGame.body.InnerHTML=Game
    sName.body.InnerHTML=Game
End Sub

With:

Sub window_onload()
    Game="Help"
    sGame.innerHTML = Game
    sName.innerHTML = Game
End Sub

You can refer to the documentation for the HTMLSpanElement on Mozilla's website. Note that this element does not have any properties defined. If you navigate up the hierarchy to the Element, you will encounter the innerHTML property.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize CSS Module class names through direct DOM access

I have a unique situation involving a component that utilizes CSS-Modules through the babel-plugin-react-css-modules plugin. During certain points in the component's lifecycle, I need to calculate new dimensions by directly accessing the DOM. Within ...

Align text in the middle using CSS

I want to apply the following css styles #header { color: #333; width: 900px; float: left; padding: 10px; border: 1px solid #ccc; height: 150px; margin: 10px 0px 5px 0px; background-image: linear-gradient(to top, #CACACA 0%, #EFEFEF 100%); } With ...

Customize your Bootstrap panel with a user-friendly wysiwyg editor

I'm trying to adjust the height of a wysiwyg editor housed within a panel to be 200px. How can I achieve this? <div class="row"> <div class="col-xs-12 col-md-12 col-lg-8"> <panel heading="Product Des ...

Utilizing jQuery to add a class to an element when a different one is hovered above

I'm currently working on implementing effects on the edges of a webpage that will be triggered when a central div is hovered over. The main tool I'm using for this task is jQuery. Despite my efforts to diagnose the issue by using alerts in my Ja ...

When I click on it, my div refuses to slide down

Help needed with creating a drop-down menu on my small website. Having trouble getting the desired slideDown effect to work, even though other animations are functioning fine. The text on the div reads "Menu". Below is the jQuery code: $(document).ready ...

Unexpected behavior: Bootstrap columns collapsing into a single row

I recently started learning how to utilize Bootstrap columns and encountered a minor issue. Whenever I shrink my browser window to the smallest size possible (or even halfway), causing the CSS rules for the columns to take effect, instead of adjusting to ...

Header remains fixed when scrolling

Is there a way to make the header of a Bootstrap table fixed when scrolling, while also adjusting the width of each column based on the content within it? I want the column headers to match the width of the row with the most text. Setting the position of t ...

Creating a design utilizing HTML columns with a set height and the ability to scroll horizontally

For my android project, I have a requirement to display a view (WebView) that dynamically loads content. The content will consist of <div class="content-item"> tags that are added by JavaScript to <div class="content-holder"> after the page has ...

Custom Wheel Color Selector plugin enhancement

I am interested in incorporating this plugin into my website https://github.com/fujaru/jquery-wheelcolorpicker/ When we initialize the plugin with the following code: <input type="text" data-wheelcolorpicker="" data-wcp-layout="block"> The default ...

Manipulating active classes on different divisions with JQuery

I've completed this code so far: <div class="yearly-archive"> <p> YEAR - <span class="archive-year year-active"> 2014 </span> / <span class="archive-year"> 2013 </span> / <span class="archi ...

Ways to implement CSS on a parent element by manipulating its child element

Hello, I am looking to apply CSS to a parent element based on its child. <li> <div> <label> <b style="display: none;">Name and Date of Event*: </b> </label> </div> </li> ...

It is not possible to highlight the text that appears in the title of the tooltip in React MUI

Within my react application, there is a component that utilizes the code snippet below: <FormControlLabel labelPlacement="top" control={ comp?.manualInput ? ( <TextField name="price" type= ...

Conceal CSS navigation bar with a single click

Is there a way to hide the dropdown menu after clicking on any item? How can I make it return to its initial state? Primarily, I want it hidden for mobile users. It currently works fine but remains open on mobile devices until another part of the page is c ...

Tips for keeping the footer consistently at the bottom of the page without using a fixed position (to avoid overlapping with the main content)

I've been struggling to keep the footer at the bottom of my webpage. I came across a solution online suggesting to use fixed CSS positioning. However, when I applied this fix, the footer ended up overlapping with the actual content on the page. Is the ...

CSS will only be visible if it is enclosed within the <style> tag

While creating a view, I noticed that my CSS is not being displayed unless it's placed inside a <style> tag. I've tried using !important without success, as well as utilizing the selector .container-fluid > .row > .d-flex > .out_pr ...

Two fields placed horizontally next to each other, with their corresponding error messages displayed directly below in perfect

I have come up with a solution to my issue: http://codepen.io/helloworld/pen/QpRxNr?editors=1100 I am trying to display 2 inputs, each with an error message, in a table column. The current design is too elongated for my liking to fit in just ONE table c ...

The styling of the electron button is rather peculiar

It's puzzling how the colors on my buttons seem to disappear, despite thorough investigation of the computed results revealing no unusual settings. Could this be a MacOS-related issue that I am overlooking? https://i.sstatic.net/NbcqW.png I've ...

Are you searching for a stylish tabbed navigation menu design?

I am searching for a tabbed navigation menu specifically designed to showcase images as the tab items. Here is an example of what I have in mind: <div class="menu"> <a href="#"> <img src="images/Chrysanth ...

What is the reason for the countdown number's color remaining the same even after it reaches a specific time threshold?

Creating a simple countdown for sports was my idea, but now I'm stuck on the "changeColor" part that I don't have enough knowledge about. The countdown is functioning perfectly, but customizing the colors and adding CSS animations seems challeng ...

Include a tooltip on every image by utilizing the title attribute

<br><img title="Cool as ninja!" src="/images/profile2.png" width="300"></br> <br> <strong>Who's this pretty girl ninja!?</strong> <br><img title="Cool dude bro!" src="/images/profile5.png"></br> & ...