2017-07-24 2 views
0

Hallo im zu Auto Skala versucht, die Unterseite meines TastenFehler: this.style ist nicht definiert?

aber ich bekomme nur die Fehlermeldung

TypeError: backward.style is undefined

In einer anderen Funktion, wo ich es perfekt ...

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>
arbeitet links

+1

getElement ** s ** ByClassName() - Gibt eine Sammlung von Elementen zurück, die einzeln adressiert werden müssen - tun Sie dies oder verwenden Sie getElementById(). –

+1

Verwenden Sie 'ID' anstelle von class ...' getElementByClass' return object ... Ansonsten Zugriff auf den ersten von 'document.getElementsByClassName (" rückwärts ") [0]' – gmo

+0

Ahh ok Danke !, Aber ich immer noch verstehe nicht eine Sache, ja, ich bin neu in der Codierung, ich console.loged meine rückwärts und vorwärts var aber er zeigte mir nur die tipical html was ich brauchte, warum ist es so? – idh1337

Antwort

1

getElementsByClassName() gibt eine Sammlung von Elementen verwenden, so Indexe s wie folgt: -

Beispiel: -

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>

Hinweis: - Wenn Sie überprüfen console.log(backward); Sie werden sehen, dass es sich um ein Objekt mit Indizes wie 0,1,... ist.

Verwandte Themen