change style of a class using javascript

Question

At first i only want to know if this:

document.getElementsByClassName("main-content_datafield").style.width= this.value;

is valid to use. If it is i would made a mistake. I want to create a rangeslider that controlls the size of some objects. For this i used javascript to get the value of the slider and added the code from before. So finaly it looks like this:

http://jsfiddle.net/oqh16n2u/1/

So what did i do wrong here?

thank you!

Answer 1

Try utilizing for loop to iterate HTMLCollection returned by .getElementsByClassName() , adding "px" after this.value to set width of element

var scale_range = document.getElementById('scale_range');
demo = document.getElementById("demo");

scale_range.onchange = function () {
    demo.innerHTML = this.value;

    var elems = document.getElementsByClassName("main-content_datafield");
    for (var i = 0; i < elems.length; i++) {
        elems[i].style.width = this.value + "px";
    }
}

jsfiddle http://jsfiddle.net/oqh16n2u/5/