Error: this.style is undefined?

Question

Hi im trying to auto scale the bottom of my buttons

but i only get the error message

TypeError: backward.style is undefined

In a other function where i change left it works perfect...

function buttonAutoHeight() {
  var clientHeight = document.getElementById('sliderContainer').clientHeight;
  console.log("Die höhe des Sliders ist: " + clientHeight);

  autoBottom = clientHeight / 2 - 20;

  var backward = document.getElementsByClassName("backward");
  var forward = document.getElementsByClassName("forward");
  console.log(backward);
  console.log(forward);
  backward.style.bottom = autoBottom + 'px';
  forward.style.bottom = autoBottom + 'px';

}

buttonAutoHeight();

<div id="sliderContainer">
  <div class="backward"></div>
  <div class="forward"></div>

  <div id="sliderWrapper" class="slider">
    <div id="slide1" class="slider">
      <img src="img/clouds-2517653_1920.jpg" />
    </div>
    <div id="slide2" class="slider">
      <img src="img/drop-of-water-2396748_1920.jpg" />
    </div>
  </div>
</div>

getElement**s**ByClassName() - It returns a collection of elements that must be addressed individually - so do that or use getElementById(). — Alex K., Jul 24 '17 at 11:35
Use `ID` instead of class... `getElementByClass` return object... Otherwise, access to the first one by `document.getElementsByClassName("backward")[0]` — gmo, Jul 24 '17 at 11:36
Ahh ok Thank you!, But i still dont understand one thing any yes im new to coding, I console.loged my backward and forward var but he only showed me the tipical html what i needed why is it like this? — m4gn1f1c4nt, Jul 24 '17 at 11:42

Alive to die - Anant · Accepted Answer · 2017-07-24T12:04:55.843

getElementsByClassName() returns a collection of elements so use indexes like below:-

Example:-

function buttonAutoHeight() {
  var clientHeight = document.getElementById('sliderContainer').clientHeight;
  console.log("Die höhe des Sliders ist: " + clientHeight);

  autoBottom = clientHeight / 2 - 20;

  var backward = document.getElementsByClassName("backward");
  var forward = document.getElementsByClassName("forward");
  console.log(backward);
  backward[0].style.bottom = autoBottom + 'px'; // use index [0]
  forward[0].style.bottom = autoBottom + 'px'; // use index [0]

}

buttonAutoHeight();

<div id="sliderContainer">
  <div class="backward"></div>
  <div class="forward"></div>

  <div id="sliderWrapper" class="slider">
    <div id="slide1" class="slider">
      <img src="img/clouds-2517653_1920.jpg" />
    </div>
    <div id="slide2" class="slider">
      <img src="img/drop-of-water-2396748_1920.jpg" />
    </div>
  </div>
</div>

Note:- if you check console.log(backward); you will see that it's an object with indexes like 0,1,....

Error: this.style is undefined?

1 Answers1