使用JavaScript更改具有相同名称的多个类？

Question

Check out my small project on codepen below...

http://codepen.io/ajduff14/pen/DlHge

Basically I'm just testing out my JavaScript knowledge and I want to learn how to change all the buttons to the same class and use JavaScript to input a color that will change the background color of all the buttons with the given class "buttons". I can only manage to get it to work for 1 class at a time but not several.

It's probably a simple answer but I've done quite a bit of digging for it already and I can't find one! Could someone please help?

Thanks,

Adam

Answer 1

There is no way to change classes or styles on many elements at the same time, you'll have to iterate and apply it to one element at a time

var buttons = document.querySelectorAll('.buttons');

for (var i=0; i<buttons.length; i++) {

    buttons[i].style.background = 'red';
    buttons[i].className = buttons[i].className + ' newclass';

}

Answer 2

There were some trivial mistakes in your HTML and JS code.

1) In many places, instead of class="buttons" for input tag, you specified it as id="buttons". Remember that you should have a unique id for each element.

2) You were setting the style.backgroundColor property for buttons[3] and not for all objects with class name buttons.

document.getElementsByClassName('buttons') gets you an array of objects with class name "buttons." You need to iterate over every element of this array and set its background color property to appropriate value.

You could use a for-in loop or a standard for loop to achieve this purpose. I have used the for-in loop.

for (button in buttons) {
    buttons[button].style.backgroundColor = div2.children[0].value;
}

See this link for a working copy of your project: http://jsfiddle.net/mayank_agarwal/LaQuz/