HTML — Идентификатор элемента передачи Javascript в качестве аргумента

Javascript, передающий идентификатор элемента в качестве аргумента

Мне нужна куча ползунков на HTML-странице. Я нашел этот пример в w3schools как раз то, что мне нужно.

Там следующий скрипт обрабатывает обновление только для одного жестко закодированного слайдера:

 {amp}lt;body{amp}gt; {amp}lt;h1{amp}gt;Custom Range Slider{amp}lt;/h1{amp}gt; {amp}lt;p{amp}gt;Drag the slider to display the current value.{amp}lt;/p{amp}gt; {amp}lt;div class="slidecontainer"{amp}gt; {amp}lt;input type="range" min="1" max="100" value="50" class="slider" id="myRange"{amp}gt; {amp}lt;p{amp}gt;Value: {amp}lt;span id="demo"{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; 

Вопрос: если я добавлю больше ползунков на страницу HTML, как я могу обобщить этот скрипт? Я не хочу, чтобы на каждом слайдере, который мне нужен на странице, была пара функций слайдера и функций вывода и включения.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector