Не работает калькулятор с ползунками
 

Добрый день.

За основу ползунков взят http://abpetkov.github.io/powerange/

Вывел 3 ползунка - они работают, тут всё ок.

Мне нужно вывести результат скажем: значение 1-го ползунка умноженное на значение второго.

Для этого я объявил переменную cl, перемножил данные и вывел на экран. <span id="clientov"></span>

cl = clbk.value*clbk2.value;
document.getElementById('clientov').innerHTML = cl;


При регулировке ползунков никакой реакции нет ) Пробовал запихнуть в функцию второго ползунка. Как результат идёт расчёт, когда использую второй ползунок ))

Только знакомлюсь с js и не знаю, как сделать проверку каждого ползунка на то, были ли изменены значения. Я очень надеюсь, что более менее понятно выразился.

<script type="text/javascript">
    // первый
    var clbk = document.querySelector('.js-callback');
    var initClbk = new Powerange(clbk, { callback: displayValue, start: 405000, max: 500000 });

    function displayValue() {
      document.getElementById('js-display-callback').innerHTML = clbk.value;
	  
	     }
	
	//второй
	var clbk2 = document.querySelector('.js-callback2');
    var initClbk2 = new Powerange(clbk2, { callback: displayValue2, start: 17, max: 30, step: 1 });

    function displayValue2() {
      document.getElementById('js-display-callback2').innerHTML = clbk2.value;

 cl = clbk.value*clbk2.value;
	  document.getElementById('clientov').innerHTML = cl;

	 
}
	//третий	
    var clbk3 = document.querySelector('.js-callback3');
    var initClbk3 = new Powerange(clbk3, { callback: displayValue3, start: 3650, max: 5000 });

    function displayValue3() {
      document.getElementById('js-display-callback3').innerHTML = clbk3.value;
	 

	
}

это какой элемент? если input то value а не innerHTML

Спасибо, что откликнулись. Нет, не input. У меня span стоит. Текст отредактировал, для наглядности.

zharinov,
сделайте рабочий макет

zharinov,

// первый
    var clbk = document.querySelector('.js-callback');
    //второй
    var clbk2 = document.querySelector('.js-callback2');
    var initClbk = new Powerange(clbk, { callback: displayValue, start: 405000, max: 500000 });

    function displayValue() {
    document.getElementById('js-display-callback').innerHTML = clbk.value;
    var cl = clbk.value*clbk2.value;
    document.getElementById('clientov').innerHTML = cl;
       }



    var initClbk2 = new Powerange(clbk2, { callback: displayValue2, start: 17, max: 30, step: 1 });

    function displayValue2() {
      document.getElementById('js-display-callback2').innerHTML = clbk2.value;

    var cl = clbk.value*clbk2.value;
    document.getElementById('clientov').innerHTML = cl;


}
  //третий
    var clbk3 = document.querySelector('.js-callback3');
    var initClbk3 = new Powerange(clbk3, { callback: displayValue3, start: 3650, max: 5000 });

    function displayValue3() {
      document.getElementById('js-display-callback3').innerHTML = clbk3.value;



}

Потому что тебе надо запихивать свой расчет во все калбеки

displayValue
displayValue2
displayValue3

потому что ты сделал череж ж. )))

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

ТС, тебе нужен 1 колбек на все. Внутри него уже разберешься кто его вызвал и в одном месте посчитаешь и выведешь что хочешь куда угодно.

правильный ответ не проинициализирована переменная clbk2 перед её применением

warren buffet,
сначала нужно исправить проблему потом оптимизировать мистер торопыга.

рони, я думал ты картинку из русской народной сказки отпостишь. Странно. Ну исправляй проблему копипастой одинакового кода.