JavaScript (not jQuery) Find class and add new class

Question

I am trying to find if a class name exists in a webpage, and then add a new class.

Testing in Chrome Developer Tools Console I get undefined. What am I doing wrong?

Code I am using.

const srtClass = document.querySelectorAll('.sr-only'); 
srtClass.className += " showoffScreenText";
console.log(srtClass);

The results for the console.log

HTMLCollection(2) [span.sr-only, div.sr-only] className: "undefined showoffScreenText"

The sr-only class is found so why is it undefined?

score 1 · Answer 1 · answered Sep 25 '20 at 22:46

1

"querySelectorAll" returns a NodeList, you should get the first element

srtClass = document.querySelectorAll('.sr-only')[0]

answered Sep 25 '20 at 22:46

de3

Simpler is to use `querySelector` – Barmar Sep 25 '20 at 22:48
@Barmar thanks, that works for the first class found Home Page – Laurence L Sep 25 '20 at 23:12
How do I add the new class to all instances of sr-only? – Laurence L Sep 25 '20 at 23:12
Use a loop to process all of them – Barmar Sep 25 '20 at 23:15

1 Answers1