getElementsByClassName not effecting multiple divs

Question

<a id="backgroundenamel_realbutton_powderblue"
 href="javascript:set_radio('radio_bgenamel_powderblue');" 
 class="radio-picture-enamel" style="background-color: #97b4d2;"
 onclick="document.getElementsByClassName('cx00ringbuilder_topinsidecolor_img')[0].style.backgroundColor='#97b4d2';">&nbsp;</a>

The above is supposed to change the color for multiple divs. I need a way for it to do all the divs. I know I have to change the [0] to an array or something but I don't know how.... any help would be greatly appreciated.

Read [this](http://stackoverflow.com/questions/3010840/loop-through-array-in-javascript), [this](https://developer.mozilla.org/en/docs/Web/API/EventTarget/addEventListener) and [this](http://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name) — Artyom Neustroev, Sep 03 '15 at 22:51
I would also add that using inline JS is terrible for code maintainability. Separating HTML and JS makes debugging a lot easier. — blex, Sep 03 '15 at 22:54

score 4 · Answer 1 · answered Sep 03 '15 at 22:54

You can't assign a value to multiple objects at once. Loop through the objects:

var elements = document.getElementsByClassName('cx00ringbuilder_topinsidecolor_img');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor='#97b4d2';
}

getElementsByClassName not effecting multiple divs

1 Answers1