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>

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

1 个答案: