Javascript function does not work

0

I created a Javascript function to get the width of a div and then add that width to 4 other divs, but that is 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>
    
asked by anonymous 09.05.2018 / 22:51

2 answers

1

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 enter a value in a style you need to specify the measure you are using. This means that in css 100 it does not represent a measure but 100px . When you retrieve the value in offsetWidth the value returned is only 100 .

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

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 slideshow is in the css, you can retrieve it directly, without needing to include px as a measure of your css, using getComputedStyle :

var slidewidth = window.getComputedStyle(document.getElementById("slideshow")).width;
    
09.05.2018 / 23:09
1

It's probably because you wrote for wrong.

Make for (var i in objs) will iterate through all properties of objs (including indices) and every loop will i be one of these ites.

You are trying to use the i variable as the index of the objs collection. The right thing would be to make the variable i get only the possible indexes for the objs collection.

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

In addition, you need to specify the unit of measure for 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>
    
09.05.2018 / 23:04