Question

I have a div whose width and height should be the same:

<div class="radior" id="ha" style="background-color: #006;" onClick='foo()'></div>

So with Javascript I first check the height and then want to change the width of the <div>

function foo(){
    var innerHeight = document.getElementById('ha').offsetHeight;
    var ele = document.getElementsByClassName("radior");

    for (var i = 0, len = ele.length; i < len; i++){
       ele[i].style.width = innerHeight;
    }
}

But somehow it wont work! I dont get it!
Greetings from Germany and here is the example on fiddle:

http://jsfiddle.net/TSk6y/1/

Answer 1

Why dont you keep it simple? You don’t need a for loop for that. Just address the element directly and append +"px" to your width declaration.

<div class="radior" id="ha" style="background-color: #006;" onClick='foo(this)'></div>

function foo(that){
    var innerHeight = that.offsetHeight;
    that.style.width = innerHeight+"px";
}

or even shorter:

function foo(that){
    that.style.width = that.offsetHeight+"px";
}