Error when attempting to get all elements with specific Class

Question

I have an HTA in which I must update the innerHTML of a set of elements with the class driveLetter. Before I do this I must obviously grab an array of all elements with this class.

I've tried doing this with JS, however I'm told via an error that both of the methods below are not supported (Tested with IE9 and IE11). Using these functions within an HTML file works, but this is an HTA.

var driveLetterInstances = document.getElementsByClassName("driveLetter");
var driveLetterInstances = document.querySelectorAll(".driveLetter");

The errors generated by lines above -

Object doesn't support property or method 'getElementsByClassName'
Object doesn't support property or method 'querySelectorAll'

I don't specifically have to use JS and would be open to using VBS to carry out this function, but I have no clue on how to start with that (or even if it's possible).

Answer 1

To replace the innerHTML of set elements you could always just do something as simple as one line like this:

JQuery Solution 1:

// Find all the elements with the class name ".driveLetter" and replaces with "new content"
$(".driveLetter").html("new content");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- All elements with the same class name to be replaced with new content -->
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>

JQuery Solution 2:

// Loop through the classname
$('.driveLetter').each(function(key, value) {
  value.innerHTML = "New Content";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- All elements with the same class name to be replaced with new content -->
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>
<div class="driveLetter"> Hello </div>

JQuery can be used by calling it from JQuery website or can be stored locally

Example from getting from online

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Example from getting from local file

<script src="js/jquery.min.js"></script>

Explanation of querySelectorAll()

I believe IE8 only supports querySelectorAll() in the standard mode. REF: Check this

The Selectors API is defined as part of the Selectors API specification and is only available to Web pages displayed in IE8 standards mode.

Selectors API

The chances are that you're not setting the proper DOCTYPE declaration; you will need to add one.