Javascript function does not work

Question

I created a Javascript function to grab the width of a div and then add that width to another 4 Ivs, only it’s not working.

Javascript

window.onload = function() {
    var slidewidth = document.getElementById("slideshow").offsetWidth;
    var objs = document.getElementsByClassName("slide");
    for(var i in objs) {
        objs[i].style.width = slidewidth;
    }
}

HTML

<div class="slideshow" id="slideshow">
    <div class="slideshowarea">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </div>
</div>

Answer 1

It’s probably because you wrote for wrong.

Do for (var i in objs) will iterate through all properties of objs (including the indices) and each variable loop i will be one of these ites.

You are trying to use the variable i as an index to the collection objs. The right thing would be to do then the variable i receive only the possible indexes for the collection objs.

Or else use for of to assign to the variable i each item in the collection (mode 2 in the example).

In addition to all this, you must specify the unit of measure for the width, for example px.

window.onload = function() {
    var slidewidth = document.getElementById("slideshow").offsetWidth;
    var objs = document.getElementsByClassName("slide");
    for(var i = 0; i < objs.length; i++) {
        objs[i].style.width = slidewidth + 'px';
    }
    
    // 2
    for(var i of objs) {      
      i.style.width = slidewidth + 'px';
    }
}

<div class="slideshow" id="slideshow">
    <div class="slideshowarea">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </div>
</div>

Answer 2

Your for is not traversing the recovered elements. You need to change it to:

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

Then, when you will insert a value into a style you need to specify the measure you are using. This means that in css 100 does not represent a measure, but 100px. When you recover the value in offsetWidth the value returned is only 100.

You need to set px "manually" when changing the width value of your class slide:

window.onload = function() {
    
    var slidewidth = document.getElementById("slideshow").offsetWidth;
    var objs = document.getElementsByClassName("slide");
    
    for(var i = 0; i < objs.length; i++) {
        objs[i].style.width = slidewidth + "px";
    }
    
}

.slideshow {
  width: 100px;
  height: auto;
  background-color: #FF0000;
}

.slide {
  width: 10px;
  height: auto;
  background-color: #00FF00;
}

<div class="slideshow" id="slideshow">
    <div class="slideshowarea">
        <div class="slide">a</div>
        <div class="slide">b</div>
        <div class="slide">c</div>
        <div class="slide">d</div>
    </div>
</div>

If the width value of the slideshow is in css, you can recover directly, without needing to include the px as a measure of your css, using getComputedStyle:

var slidewidth = window.getComputedStyle(document.getElementById("slideshow")).width;