如何將輸入範圍的值傳遞給JS中的變量？

Question

如何將輸入範圍滑塊的值存入變量？以下是我使用的範圍。假設我將範圍拖到12，然後我需要「12」作爲我想要傳遞給函數的變量。

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

編輯：我不想一個按鈕來確認該值什麼的，我想是每次值被改變，它就會被傳遞給函數，因此這將是動態的！ PS：這可能不是最好的問題，但我真的試圖在發佈問題之前尋找答案。

Answer 1

如果你給一個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); 
}); 

Answer 2

你只需要綁定到change事件：

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

$("input").change(function(){ 
    var value = $(this).val(); 
    alert(value); 
}) 

Answer 3

只需使用輸入註冊事件：

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

您當然也可以在oninput字段中調用函數。

Answer 4

給輸入一個Id。然後使用 jQuery的

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

對於JavaScript

Var a = getElementById('whateverID).innerHtml; 

Answer 5

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 
}; 

Answer 6

你可以簡單地通過添加監聽到現場的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">