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).

getElementsByClassName is supported IE9+ https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName — AmmarCSE, Jun 09 '15 at 09:40
Can you display your attempt of updating the `innerHTML` using `getElementByClassName` or `querySelectorAll` and did you use a for loop to loop through the array of elements? — NewToJS, Jun 09 '15 at 09:41
I think the problem is that getElementsByCLassName returns an Array, not an element. Then you need to pick the first one. — Alejandro Teixeira Muñoz, Jun 09 '15 at 09:43
@NewToJS - No attempt yet, I fell at the first hurdle. Both examples in my question return an error, thus I can't try to update the `innerHTML`. Thanks. — David Gard, Jun 09 '15 at 09:44
anyway, check this question too http://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie — Alejandro Teixeira Muñoz, Jun 09 '15 at 09:44
@DavidGard do you know how to use a for loop? If so just use one to loop through the elements.... — NewToJS, Jun 09 '15 at 09:51
@NewToJS - Yes, I know how to loop. However, the issue is actually grabbing the elements; both methods via JS known to me generate an error when used in an HTA, and it is that for which I am seeking help. Thanks. — David Gard, Jun 09 '15 at 10:04
@AlejandroTeixeiraMuñoz - I'm having a look at the links provided, however I not the use of `querySelectorAll` in the first two I looked at, thus an error will be generated. — David Gard, Jun 09 '15 at 10:05
@DavidGard Ah right, I understand now. This is why I asked to seen an attempt but I don't know of another method so I wish you the very best in searching for a solution. — NewToJS, Jun 09 '15 at 10:08
@NewToJS - Thanks. If successful I'll post, but given some of the links posted here it seems that this is actually quite a common problem with HTA files not fully supproting JS. Hopefully someone will come through with a VBS solution! — David Gard, Jun 09 '15 at 10:11
@AnsgarWiechers - YES!!!! That's done it, well found and thanks for posting. — David Gard, Jun 09 '15 at 11:07

YaBCK · Answer 1 · 2015-06-09T10:26:44.103

2

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.

edited Jun 09 '15 at 10:26

answered Jun 09 '15 at 09:45

YaBCK

2,949
4
32
61

1

This is Jquery Chris, not javascript. – Alejandro Teixeira Muñoz Jun 09 '15 at 09:45
@AlejandroTeixeiraMuñoz "I don't specifically have to use JS" read his question – YaBCK Jun 09 '15 at 09:46
No mention of jQuery in your answer and it isn't tagged in the question. If you plan to give a jQuery solution to a question that doesn't have it tagged, I would recommend clearly displaying this is using jQuery and how to like to the library. – NewToJS Jun 09 '15 at 09:47
1

Then, please,edit and explain it, show the import for jquery, and maybe it could be a good answer. – Alejandro Teixeira Muñoz Jun 09 '15 at 09:47
Updated my answer to show how to use the JQuery solution – YaBCK Jun 09 '15 at 09:49
why downvote ?i think the answer is right . downvotes are only for incorrect and non clear and irrelevant answers. – Arunprasanth K V Jun 09 '15 at 09:49
I agree, this is a good answer (when displaying the correct information to go with the source code) but I don't see any reason for a downvote. – NewToJS Jun 09 '15 at 09:52
The answer was obviously not clear, and it was also not working without the import, and jquery was not tagged in the OP. Then, it was not a good answer. After edition, there is not -1. That´s the -1 reason exist... – Alejandro Teixeira Muñoz Jun 09 '15 at 09:52
@NewToJS anyway, If you think it´s a good answer, you can upvote yourself the answer, as I did after the edit!! – Alejandro Teixeira Muñoz Jun 09 '15 at 09:54
@AlejandroTeixeiraMuñoz I would place a comment to suggest an edit to link and display the relevant information before selecting a downvote. – NewToJS Jun 09 '15 at 09:54
@NewToJS I did... that´s why the question was edited... please read FIRST comment... – Alejandro Teixeira Muñoz Jun 09 '15 at 09:55
I did read the first comment, you placed that comment with your downvote. – NewToJS Jun 09 '15 at 09:57
We don't have to argue about the down vote, at first I didn't explain my answer fully. However I've updated it and now displays how to use JQuery – YaBCK Jun 09 '15 at 09:59
jQuery would be my weapon of choice for a website/webapp, but unfortunatly this project calls for a self-contained solution, so no external files can be included (not even via CDN, as users may not have access to the internet). Thanks for the answer though. – David Gard Jun 09 '15 at 10:00
@DavidGard you don't need internet to access JQuery, you can download the JQuery js and css files and store them locally inside the application – YaBCK Jun 09 '15 at 10:02
1

But that will make the applicatoin unnecessarily large for the sake of one line of code. Pure JS should support the functionality I require, if not I suspect VBS can do the job (I just don't know how to use it). Thanks. – David Gard Jun 09 '15 at 10:07
@DavidGard Check my updated answer and see "Explanation of querySelectorAll()" – YaBCK Jun 09 '15 at 10:27

Error when attempting to get all elements with specific Class

1 Answers1