如何使用Javascript將滑塊輸出變成變量

我想製作一個類似於here的滑塊，並且希望將輸出變爲變量。但問題是，我不知道輸出在哪裏。這是代碼爲滑塊 -如何使用Javascript將滑塊輸出變成變量

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 

<div data-role="page"> 
    <div data-role="header"> 
    <h1>Slider Control</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
    <form method="post" action="demoform.asp"> 
     <label for="points">Points:</label> 
     <input type="range" name="points" id="points" value="50" min="0" max="100"> 
     <input type="submit" data-inline="true" value="Submit"> 
    </form> 
    </div> 
</div> 

</body> 
</html>

是的，我知道這使用jquery，順便說一句。無論如何，你能告訴我幾行代碼來添加（或更改）以使輸出更改爲變量嗎？謝謝！

來源

2016-12-16 Nathan Chan

您的意思是？ 'console.log（$（'＃points'）。val（））;' – Xzandro

我希望它是一個變量，而不是console.log –

那麼，只要'let points = $（'＃points'）.val （）;' – Xzandro

你可以在slidestop或change事件

<script> 
var sliderValue; 
$(function() { 
    $("#points").on("slidestop", function() { 
    sliderValue = $(this).val(); 
    }) 
    $("#points").on("change", function() { 
    sliderValue = $(this).val(); 
    }) 
}); 
</script>

你可以只body標籤結束前添加此滑塊的值。

來源

2016-12-16 05:32:29 Mairaj

@NathanChan我認爲你需要先學習基礎知識。 – Mairaj

我想將滑塊的輸出變成一個變量 –

@NathanChan這段代碼將滑塊的值放入'variable sliderValue' – Mairaj

This is test to see if what you(Leopard) made worked - 

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 

<div data-role="page"> 
    <div data-role="header"> 
    <h1>Choose the Height of Your Building</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
    <form method="post" action="demoform.asp"> 
     <label for="percentage">Percentage:</label> 
     <input type="range" name="percentage" id="percentage" value="50" min="1" max="100"> 
     <input type="submit" data-inline="true" value="Submit"> 
    </form> 
    </div> 
</div> 

<script> 
var sliderValue; 
$(function() { 
    $("#percentage").on("slidestop", function() { 
    sliderValue = $(this).val(); 
    }) 
    $("#percentage").on("change", function() { 
    sliderValue = $(this).val(); 
    }) 
}); 

<document.getElementById("print2").innerHTML = sliderValue> 

</script> 

</body> 
</html>

它沒有工作。

來源

2016-12-17 06:20:47

如何使用Javascript將滑塊輸出變成變量

回答

相關問題