How to Change this JS to Use GetElementsByClassName

Question

I am attempting to make this JS add a class to another class (not an id):

 var d = document.getElementById("div1");
 d.className = d.className + " other class";

ie.

  var d = document.getElementsByClassName("div1");
  d.className = d.className + " other class";

I have a pen here that you can toy with: http://codepen.io/xkurohatox/pen/wMWKKM

Ideally it would be nice for something that functions with IE 8+ and modern browsers. JAVASCRIPT ONLY PLEASE (No JQuery please).

Any suggestions? Thanks!

You need to loop over the collection... Simple for loop. I am not sure how you are going to support IE8 with getElementsByClassName — epascarello, Dec 21 '15 at 00:50
Thanks @epascarello. I'm a beginner at JS so use GetElementsByClassName because that's all I was taught/could grasp. Do you have any alternative suggestions? — xkurohatox, Dec 21 '15 at 00:57

Richard Hamilton · Accepted Answer · 2015-12-21T01:05:34.680

2

document.getElements.className actually returns a collection instead of a single value.

You need to access individual elements by using array-bracket notation.

var d = document.getElementsByClassName("gold")[0]'

The above gets the first element with the required class name.

Here's a demonstration

var gold = document.getElementsByClassName("gold");

for (var i = 0; i < gold.length; i++) {
 gold[i].classList.add("bold");
}

.gold { background: gold; }
.bold { font-weight: bold; }

<p class="gold">Paragraph 1</p>
<p>Paragraph 2</p>

<p class="gold">Paragraph 3</p>

edited Dec 21 '15 at 01:05

answered Dec 21 '15 at 00:59

Richard Hamilton

25,478
10
60
87

Thank you so much @Richard Hamilton! I never would have considered using an array (well, maybe in a couple years...). Wonderful explanation, wish it were kept on the front page for others to view. – xkurohatox Dec 21 '15 at 01:08

score 0 · Answer 2 · answered Dec 21 '15 at 01:59

document.querySelector() would be easier for the purpose of targeting a single element by a selector.

Target element has an id ..... document.querySelector("#anyId");
Target element has a class ... document.querySelector(".anyClass");
Target element has no class or id, use the element's tag name ... document.querySelector("div");

If there's more than one target, then the first one will be selected.

Compatible with all browsers even IE8 (limited), see CanIUse and for details see MDN

Btw, IE8 is no longer supported by MicroSoft, see this obituary

var target = document.querySelector('.AnyClass');

var button = document.querySelector('#AnyID');

button.onclick = function() {
  target.classList.add('newClass');
}

.AnyClass {
  border: 2px solid blue;
  height: 100px;
  width: 100px;
}
.newClass {
  border: 3px dashed red;
  background: yellow;
  height: 150px;
  width: 150px;
}
section {
  border: 1px dotted brown;
  background: blue;
  height: 120px;
  width: 120px;
  display: inline-block;
}

<div class="AnyClass">TARGET</div>
<button id="AnyID">addClass</button>
<section>SECTION</section>

How to Change this JS to Use GetElementsByClassName

2 Answers2