Я не могу получить несколько одинаковых идентификаторов для выполнения одного и того же скрипта

Question

Я хочу создать кнопки прокрутки вверх.

Это мой код в JS. Проблема в том, что, хотя у меня есть 3 кнопки с одинаковым идентификатором, я могу использовать только одну при каждой загрузке страницы. Почему это происходит? Что я должен делать?

ОБНОВЛЕНИЕ

Я не знал, что могу использовать идентификатор только один раз. Я перепробовал все предложенные решения, но по какой-то причине getElementsByClassName тоже не работает. :(

Решение было заменить на:

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

Вот мой HTML тоже:

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

javascript html scroll getelementbyid

4

justme 19 Дек 2015 в 15:01

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

4

Rayon 17 Авг 2016 в 09:45

Answer 2

Используйте класс вместо идентификатора, если вам нужно использовать его несколько раз. Идентификатор предназначен для использования только один раз, в то время как класс может использоваться любое количество раз. getElementById () все еще должен работать с классами.

0

eiglow_ 19 Дек 2015 в 12:06

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

0

Sundar Singh 19 Дек 2015 в 12:33

Answer 4

Не создавайте разметку, содержащую элементы с дублирующимися идентификаторами. Это сломает вещи, и вы будете искалеченными на велоцираптор быстрее, чем вы можете сказать "goto".

Вместо этого используйте классы :

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

0

Bhavin Solanki 19 Дек 2015 в 12:17

Я не могу получить несколько одинаковых идентификаторов для выполнения одного и того же скрипта

4 ответа

Похожие вопросы

Новые вопросы

javascript