Ich kann nicht mehrere identische IDs zum Ausführen des gleichen Skripts

Question

Ich möchte Scroll-to-Top-Schaltflächen erstellen.

Dies ist mein Code in JS. Das Problem ist, dass, obwohl ich 3 Tasten mit der gleichen ID habe, ich immer nur eine verwenden kann, wenn ich die Seite lade. Warum passiert dies? Was soll ich machen?

UPDATE

Ich wusste nicht, dass ich nur einmal ID verwenden könnte. Ich habe alle vorgeschlagenen Lösungen ausprobiert, aber aus irgendeinem Grund funktioniert auch die getElementsByClassName nicht. :(

Die Lösung wurde mit ersetzen:

$('.scrolltotop').on('click', function(){/* do your stuff */}); 

Hier ist mein html zu:

<ul class="stats"> 
<li class="scrolltotop"><a href="#">GO TO TOP</a></li> 
</ul> 

JS:

document.getElementsByClassName('scrolltotop').onclick = function() { 
scrollTo(document.body, 0, 100); 
} 

    function scrollTo(element, to, duration) { 
     if (duration < 0) return; 
     var difference = to - element.scrollTop; 
     var perTick = difference/duration * 2; 

    setTimeout(function() { 
     element.scrollTop = element.scrollTop + perTick; 
     scrollTo(element, to, duration - 2); 
    }, 10); 
} 

Answer 1

Neuer Code. Das sollte funktionieren.

getElementsByClassName wird nur array-like object aller Elemente mit dem Klassennamen zurückgeben. Sie müssen es durchlaufen und eins nach dem anderen zuweisen.

var classData = (document.getElementsByClassName('scrolltotop')); 
for(var i = 0; i < classData.length; i++) 
{ 
    classData[i].onclick = function() 
    { 
     scrollTo(document.body, 0, 100); 
    } 
} 
function scrollTo(element, to, duration) 
{ 
    if(duration < 0) return; 
    var difference = to - element.scrollTop; 
    var perTick = difference/duration * 2; 

    setTimeout(function() 
    { 
     element.scrollTop = element.scrollTop + perTick; 
     scrollTo(element, to, duration - 2); 
    }, 10); 
} 

Eine andere Möglichkeit, es einfach zu tun, ist die Verwendung von jQuery.

$('.scrolltotop').on('click', function(){/* do your stuff */}); 

Answer 2

Verwenden Klasse statt id wenn Sie müssen es mehrmals verwenden, die ID soll nur einmal verwendet werden, während die Klasse verwendet werden kann d beliebig oft. getElementById() sollte immer noch mit Klassen arbeiten.

Answer 3

Bitte benutzen Klasse für sie als ID für jedes Element eindeutig ist

var classname = document.getElementsByClassName("scrolltotop"); 


for (var i = 0; i < classname.length; i++) { 
    classname[i].onclick = function() { 
    scrollTo(document.body, 0, 100); 
    } 
} 

function scrollTo(element, to, duration) { 
    if (duration < 0) return; 
    var difference = to - element.scrollTop; 
    var perTick = difference/duration * 2; 

    setTimeout(function() { 
    element.scrollTop = element.scrollTop + perTick; 
    scrollTo(element, to, duration - 2); 
    }, 10); 
} 

Answer 4

nicht Markup erstellen, die Elemente mit doppeltem IDs enthält. Dies wird Dinge brechen, und Sie werden mauled by a velociraptor faster than you can say "goto" sein.

Verwenden Klassen statt:

<img src='...' class='scrolltotop' /> 
<img src='...' class='scrolltotop' /> 
document.getElementsWithClass('scrolltotop').onclick = function() { 
    scrollTo(document.body, 0, 100); 
}