Как заставить работать два одинаковых ползунка на одной странице?

Question

[Иван Медведев]

Догадываюсь, что у меня супер легкий вопрос, но все же, не нагуглил ответ.

Есть на странице два ползунка. Как заставить работать оба? Когда двигаю первый, то его значение меняется, а вот при движении второго - значение на месте.

Код предоставил:

Answer 1

[Андрей]

У вас на странице несколько элементов с одинаковым ID. С помощью getElementById() берется первый попавшийся. В вашем случае только первый sum_text и первый sum. Слушатель, следовательно, вешается только на него и меняется текст только в первом sum_text.
Выход - использовать метод, который возвращает коллекцию узлов, например, querySelectorAll, циклом повесить слушатель на каждый input, а с помощью уникального ID у узлов с текстом назначать нужный текст нужному блоку.

Comments

[Иван Медведев]

Я не силен в JS. Что я должен дописать, чтобы исправить проблему?

[Иван Медведев]

Алексей Аминодов-Борисов, я пробовал менять id но этого не достаточно. Кроме смены id что в js заменить?