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

Question

Есть два ползунка (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>

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

Answer 1

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

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

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

БЛОГ НА HUSL

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

Ответы (1 шт):