0

Есть два ползунка (range), в каждом из них должны отображаться значения. Беру кусок js кода из первой и вставляю ниже, при этом пишу уникальные функции для второго ползунка. Работает только один ползунок.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

var mamont = document.getElementById("myMamont");
var output = document.getElementById("number");
output.innerHTML = mamont.value;

mamont.oninput = function() {
  output.innerHTML = this.value;
}
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="mamont" id="myMamont">
  <p>Value: <span id="number"></span></p>
</div>

Как корректно указать функцию для второго ползунка?

1
  • 2
    Один из var output поменяйте на другое название переменной
    – SwaD
    8 дек 2022 в 17:32

1 ответ 1

0

По возможности надо уходить от дублирования кода, это плохая практика.

У вас ошибка в том, что вы переопределяете переменную. Лучшим вариантом будет создать одну функцию с нужным функционалом и ее вызывать для нужных компонентов

function sliderChange(inPut, outPut) {
  const slider = document.getElementById(inPut);
  const output = document.getElementById(outPut);
  output.innerHTML = slider.value;

  slider.oninput = function() {
    output.innerHTML = this.value;
  }
}

sliderChange('myRange', 'demo');
sliderChange('myMamont', 'number');
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.