मुझे एक ही स्क्रिप्ट को निष्पादित करने के लिए एकाधिक आईडी नहीं मिल सकते हैं

Question

मैं स्क्रॉल-टू-टॉप बटन बनाना चाहता हूं।

यह जेएस में मेरा कोड है। समस्या यह है कि भले ही मेरे पास एक ही आईडी के साथ 3 बटन हैं, मैं केवल पृष्ठ लोड करने पर केवल एक ही उपयोग कर सकता हूं। ये क्यों हो रहा है? मुझे क्या करना चाहिए?

अद्यतन

मुझे नहीं पता था कि मैं केवल एक बार आईडी इस्तेमाल कर सकते हैं। मैंने सभी सुझाए गए समाधानों की कोशिश की लेकिन किसी कारण से getElementsByClassName या तो काम नहीं करता है।

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

जे एस:

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

नए कोड। यह काम करना चाहिए।

getElementsByClassName केवल आप सभी वर्ग के नाम होने तत्वों की array-like object वापस आ जाएगी। आपको इसे लूप करना होगा और इसे एक-एक करके असाइन करना होगा।

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); 
} 

इसे आसानी से करने का एक और तरीका jQuery का उपयोग करना है।

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

Answer 2

उपयोग आईडी के बजाय वर्ग अगर

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

यहाँ भी मेरी एचटीएमएल है: :(

समाधान के साथ बदलने के लिए था आपको इसे कई बार उपयोग करना होगा। आईडी का उपयोग केवल एक बार किया जाना चाहिए, जबकि कक्षा का उपयोग किया जा सकता है डी कई बार। getElementById() अभी भी कक्षाओं के साथ काम करना चाहिए।

Answer 3

इसके लिए वर्ग का उपयोग करें के रूप में आईडी प्रत्येक तत्व

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

मार्कअप कि डुप्लिकेट आईडी वाले तत्व शामिल न बनाएं के लिए अद्वितीय है। यह चीजों को तोड़ देगा, और आप mauled by a velociraptor faster than you can say "goto" होंगे।

उपयोग कक्षाएं बजाय:

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