Извлечение текущего значения из диапазона ввода для использования в другой функции

Question

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

HTML

<input type="range" min="0" max="10" step="1" value="0">
<div class="value">0</div>

JS

var elem = document.querySelector('input[type="range"]');

var rangeValue = function(){
  var newValue = elem.value;
  var target = document.querySelector('.value');
  target.innerHTML = newValue;
  return newValue; 
}

function test(){
  console.log (newValue);
}

elem.addEventListener("input", rangeValue);

Я пытался получить значение с помощью глобальных переменных и возврата, но продолжаю сталкиваться с проблемами. Буду признателен, если кто-нибудь сможет объяснить, как это можно сделать, используя оба метода.

Заранее спасибо

Answer 1

Я думаю, это то, что вы хотите:

var elem = document.querySelector('input[type="range"]');

var rangeValue = function(){
  var newValue = elem.value;
  var target = document.querySelector('.value');
  target.innerHTML = newValue;
  test(newValue); 
}

function test(newValue){
  console.log (newValue);
}

elem.addEventListener("input", rangeValue);

Тест здесь: https://jsfiddle.net/k05qm2v5/

Кроме того, использование querySelector('input[type="range"]') не лучшая идея. Вы должны дать ему имя или идентификатор и получить его как:

var elem = document.getElementById('miRange');

HTML:

<input id="myRange" type="range" min="0" max="10" step="1" value="0">
<div class="value">0</div>