使用JavaScript更改具有相同名稱的多個類？

Question

在下面查看我在Codepen上的小項目...

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

基本上，我只是測試我的JavaScript知識，我想學習如何將所有按鈕更改為同一類，並使用JavaScript輸入一種顏色，該顏色將更改給定類“按鈕”中所有按鈕的背景色。 我只能設法讓它一次只能上一堂課，而不能上幾堂課。

這可能是一個簡單的答案，但是我已經對其進行了很多挖掘，但我找不到！ 有人可以幫忙嗎？

謝謝，

亞當

Answer 1

無法同時更改多個元素上的類或樣式，您必須一次迭代並將其應用於一個元素

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

您的HTML和JS代碼中有一些瑣碎的錯誤。

1）在許多地方，您將輸入標簽指定為id =“ buttons”而不是class =“ buttons”。 請記住，每個元素應具有唯一的ID。

2）您正在為button [3]而不是為所有帶有類名按鈕的對象設置style.backgroundColor屬性。

document.getElementsByClassName（'buttons'）為您提供一個類名稱為“ buttons”的對象數組。 您需要遍歷此數組的每個元素，並將其背景顏色屬性設置為適當的值。

您可以使用for-in循環或標准的for循環來實現此目的。 我使用了for-in循環。

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

請參閱此鏈接以獲取項目的工作副本： http : //jsfiddle.net/mayank_agarwal/LaQuz/