如何将输入范围的值传递给JS中的变量

How to pass value of an input range to a variable in JS?

本文关键字：JS 变量 值传 输入 范围      更新时间：2023-09-26

如何将输入范围滑块的值获取到变量中？下面是我使用的范围。假设我将范围拖动到12，那么我需要"12"作为变量，然后将其传递给函数。

 <input type="range" min="1" max="30" value="15" />

编辑：我不想要一个按钮来确认值或其他什么，我希望每次值更改时，它都会传递给函数，所以它将是动态的！

附言：这可能不是最好的问题，但在发布问题之前，我确实试过寻找答案。

您只需要绑定到change事件：

<input type="range" min="1" max="30" value="15" />
$("input").change(function(){
    var value = $(this).val();
    alert(value);
})

如果您为字段提供一个id：

 <input id="myRange" type="range" min="1" max="30" value="15" />

然后：

 $('#myRange').val();

第一步，这并不是真正需要的，但它让事情变得更容易。

您可以在每个表单字段元素中执行此操作：

 $('selector').val();

你会得到它的价值。

问题更新：

使用.change事件绑定一个函数，该函数可以使用该值进行任何操作，例如：

$('#myRange').change(function(){
    var myVar = $(this).val();
    alert(myVar);
});

只需在输入上注册一个事件：

<input type="range" min="1" max="30" value="15" oninput="alert(this.value)" />

当然，您也可以调用oninput字段中的函数。

jsfiddle

<input id="field" type="range" min="1" max="30" value="15" />

var input = document.getElementById('field');
console.info(input.defaultValue); // value default (15)
input.onchange = function () {
  console.info(input.value); // value change
};

您只需在字段的input事件中添加一个侦听器，并在每次触发时更新您的变量即可完成此操作。

var input=document.querySelector("input"),
    value=input.value;
console.log(value);
input.addEventListener("input",function(){
    value=this.value;
    console.log(value);
},0);
<input max="30" min="1" type="range" value="15">

给输入一个Id。然后使用对于JQuery

Var a = $('#whateverId').val();

对于JavaScript

Var a = getElementById('whateverID).innerHtml;
相关文章：