Javascript несколько обратных вызовов

Question

Я использую это plugin для отображения 2 ползунков диапазона цен на моем веб-сайте. Проблема в том, что когда я добавляю второй слайдер диапазона, первый из них больше не работает.

код JS я использую:

// Range 1 
var clbk = document.querySelector('.value1'); 
var initClbk = new Powerange(clbk, { callback: displayValue, start: 20 }); 
function displayValue() { 
    document.getElementById('slider1').innerHTML = clbk.value; 
} 

// Range 2 
var clbk = document.querySelector('.value2'); 
var initClbk = new Powerange(clbk, { callback: displayValue, start: 40 }); 
function displayValue() { 
    document.getElementById('slider2').innerHTML = clbk.value; 
} 

Я также загрузил здесь jsfiddle пример.

Что я делаю неправильно?

Answer 1

Вот правильный ответ: Ваша проблема в том, вы называете ту же функцию, одни и те же переменные, и то большая ошибка , потому что это Diferent, проверить эту скрипку коррекцию;)

HTML

<div class="slider-wrapper"> 
<input type="text" class="value1" /> 
<label class="display-box-label"> Value1:</label> 
<div id="slider1" class="display-box"></div> 
</div> 

<div class="slider-wrapper"> 
<input type="text" class="value2" /> 
<label class="display-box-label"> Value2:</label> 
<div id="slider2" class="display-box"></div> 
</div> 

JavaScript:

// Range 1 
var clbk1 = document.querySelector('.value1'); 
var initClbk1 = new Powerange(clbk1, { callback: displayValue1, start: 20 }); 
function displayValue1() { 
    document.getElementById('slider1').innerHTML = clbk1.value; 
} 

// Range 2 
var clbk2 = document.querySelector('.value2'); 
var initClbk2 = new Powerange(clbk2, { callback: displayValue2, start: 40 }); 
function displayValue2() { 
    document.getElementById('slider2').innerHTML = clbk2.value; 
} 

https://jsfiddle.net/h3fyupjm/10/

Answer 2

Две вещи, на первый проверить идентификаторы в коде, нет slider1 ID

Во-вторых, вы перезаписать функцию displayValue. Вы не можете иметь две функции с тем же именем

Проверьте рабочий пример:

https://jsfiddle.net/h3fyupjm/9/