getElementsByClassName confusing issue

Question

Can someone explain getElementsByClassName, because I thought I was using it correctly, but I am having issues. For instance, the following code doesn't make the hidden elements visible:

var actionButtons = document.getElementsByClassName("action_buttons");
for (var i=0; i < actionButtons.length; i++) {        
    actionButtons[i].style.visibilty = "visible";
}

Yet, if I select by Id I can change the elements' properties. Any idea what the issue is?

I only have "use strict statement" and unused variable warnings so far. And I definitely have four button elements with class="action_buttons".

If I plug in alert(actionButtons[i]); I get object HTMLButtonElement four times...

And here is the relevant HTML:

<button type="button" id="stand_button" class="action_buttons">Stand</button>
<button type="button" id="hit_button" class="action_buttons">Hit</button>
<button type="button" id="double_down_button" class="action_buttons">Double-Down</button>
<button type="button" id="split_button" class="action_buttons">Split</button>

Do you have a class called "action_buttons" on your elements? Any errors in the console? — tymeJV, Oct 22 '14 at 19:06
When you debug this, where exactly does it fail? Are any elements found? Are they the elements you expect? Is their styling being updated in the DOM? Is something else making them not be visible? — David, Oct 22 '14 at 19:11
Side note: There's no reason to have that if statement. `if(true){...}` will always pass, so the check is pointless. — Duncan, Oct 22 '14 at 19:12
Duncan, I changed that to true, just to make it clear that that part wasn't the issue. — Dave M, Oct 22 '14 at 19:16
@rontornambe IE8 doesn't support itself, so no surprise there. :p — Duncan, Oct 22 '14 at 19:17
@DaveM I understand your thinking, but for future reference, it's best just to leave your logic in there. Helps to avoid undue criticism. :) — Duncan, Oct 22 '14 at 19:19

score 2 · Accepted Answer · answered Oct 22 '14 at 19:21

2

Your code has a typo:

style.visibilty

It should be:

style.visibility

answered Oct 22 '14 at 19:21

Alan Dalton

36
1
4

Thanks a lot! Really was getting to me. – Dave M Oct 22 '14 at 19:23

score 0 · Answer 2 · answered Oct 22 '14 at 19:15

The code you posted is fine, but it only work if an element with class name 'action_buttons' is present in your HTML. Otherwise it will definitely throw error. See the browser console to check for errors, in chrome press f12 to open the console.

May be you are just misspelled the class name either in JavaScript or in HTML.

It should be like, in the case of a button element:

HTML

<button class="action_buttons">Button</button>

JavaScript

var buttons=document.getElementsByClassName("action_buttons")

Also, you dont need to do if(true) checking inside loop.

getElementsByClassName confusing issue

2 Answers2