从范围输入中检索实时值以在另一个函数中使用

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"]')也不是最好的主意。 你应该给它一个名字或ID，并得到它，就像：

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

.HTML：

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