Var erhält keine Elemente von document.getElementsByClassName()

Am document.getElementsByClassName() Teil irgendwie "j" nicht die Elemente. as you can see there. Dies ist der HTML-Teil des Problems:Var erhält keine Elemente von document.getElementsByClassName()

<div position="relative" img=bigimg> 
    <button position="absolute" id=leftbtn onclick="showNext(-1);"></button> 
     <img class="gpic" src='../images/0.jpg'> 
     <img class="gpic" src ='../images/1.jpg'> 
     <img class="gpic" src ='../images/2.jpg'> 
     <img class="gpic" src = '../images/3.jpg'> 
     <img class="gpic" src ='../images/4.jpg'> 
     <img class="gpic" src ='../images/5.jpg'> 
     <img class="gpic" src ='../images/6.jpg'> 
     <img class="gpic" src ='../images/7.jpg'> 
     <img class="gpic" src ='../images/8.jpg'> 
<button position="absolute" id=rightbtn onclick="showNext(1);"></button>

Ich weiß nicht, was das Problem verursacht. Ich versuche, so etwas wie dies genau das zu tun: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self

Quelle

2017-08-03 benzol

Stellen Sie sicher, dass sich das Skript am Ende der Seite befindet? –

Sind diese Schaltflächen in einer Form? Wenn das der Fall ist, wird Sie der überraschende Standard "type" bekommen: Sie * senden * das Formular. –

Möglicherweise verwandt: https://stackoverflow.com/questions/14028959/why-does-jquery-or-dom-method-such-as-geelementbyid-not-find-the-element – charlietfl

Neben der variablen x benötigen j zu sein, scheint Ihr Code wie beabsichtigt zu arbeiten. Sie versuchen auch, ein Attribut position auf einem Tag festzulegen, und das tut nicht, was Sie beabsichtigen. Sie müssen entweder das style Attribut <div style="position: relative"> gesetzt haben, oder in CSS

div { 
    position: relative; 
}

Auch in Ihrem Code, gibt es keine Schließung </div>-Tag.

var index = 1; 
 
showPics(index); 
 

 
function showPics(n) { 
 
    var i; 
 
    var j = document.getElementsByClassName("gpic"); 
 
    if (n > j.length) { 
 
    index = 1; 
 
    } 
 
    if (n < 1) { 
 
    index = j.length; 
 
    } 
 
    for (i = 0; i < j.length; i++) { 
 
    j[i].style.display = "none"; 
 
    } 
 
    j[index - 1].style.display = "block"; 
 
} 
 

 
function showNext(x) { 
 
    showPics(index += x); 
 
}

img { 
 
    margin: 0 auto 
 
} 
 

 
#leftbtn { 
 
    position: absolute; 
 
    top: 75px; 
 
} 
 

 
#rightbtn { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 75px; 
 
}

<div> 
 
    <button id=leftbtn onclick="showNext(-1);">Prevoius</button> 
 
    <img class="gpic" src='http://via.placeholder.com/350x150'> 
 
    <img class="gpic" src='http://via.placeholder.com/340x150'> 
 
    <img class="gpic" src='http://via.placeholder.com/330x150'> 
 
    <img class="gpic" src='http://via.placeholder.com/320x150'> 
 
    <img class="gpic" src='http://via.placeholder.com/310x150'> 
 
    <img class="gpic" src='http://via.placeholder.com/300x150'> 
 
    <img class="gpic" src='http://via.placeholder.com/290x150'> 
 
    <img class="gpic" src='http://via.placeholder.com/280x150'> 
 
    <img class="gpic" src='http://via.placeholder.com/270x150'> 
 
    <button id=rightbtn onclick="showNext(1);">Next</button> 
 
</div>

Quelle

2017-08-03 15:30:34

Oh danke! Eigentlich hat das div eine Schließung, tut mir leid, dass ich es nicht erwähnt habe. Das Problem war mit dieser albernen Positionierung. Danke für Ihre Hilfe! – benzol

sollte Ihr Javascript so aussehen:

var index=1; 
showPics(index); 

function showPics(n) { 
    var i; 
    var x = document.getElementsByClassName("gpic"); 
    if (n > x.length) {index = 1;} 
    if (n < 1) { 
     index = x.length; 
    } 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    x[index-1].style.display = "block"; 
} 

function showNext(x) { 
    showPics(index += x); 
}

Es ist war Problem mit Variable j erklärt anstelle von x als Rest des Codes vor.

Quelle

2017-08-03 15:43:59

Var erhält keine Elemente von document.getElementsByClassName()

Antwort

Verwandte Themen