JavaScript比较输入range.value与输入range.max
[英]JavaScript compare input range.value with input range.max
问题描述
I'm trying to create a plus and a minus button to work together with a slider (input type="range"). 
我正在尝试创建一个加号和一个减号按钮以与滑块（输入type =“ range”）一起使用。 However it doesn't work as I expect it to. 但是，它不起作用，正如我期望的那样。 I created a fiddle: 我创建了一个小提琴：
window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded() { var buttonMinusRef = document.getElementById("buttonMinus"); var buttonPlusRef = document.getElementById("buttonPlus"); var brushSizeRef = document.getElementById("brushSize"); buttonMinusRef.addEventListener("click", incrementBrushSize, false); buttonPlusRef.addEventListener("click", incrementBrushSize, false); function incrementBrushSize() { if (this.id === "buttonPlus") { /* Plus Button was clicked. */ if (brushSizeRef.value < brushSizeRef.max) { brushSizeRef.value++; drawSize = brushSizeRef.value; console.log("it works"); } else { console.log("it doesn't work"); } } else { /* Minus Button was clicked. */ } } }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="myScript.js"></script> <title>Test</title> </head> <body> <p>Brush size: <span id="currentSize"></span> </p> <button id="buttonMinus">-</button> <input type="range" id="brushSize" min="1" max="140" value="20" /> <button id="buttonPlus">+</button> <br /> </body> </html>
My idea for this code is: the user clicks either plus or minus button. 我对这段代码的想法是：用户单击加号或减号按钮。 If the plus button is clicked the slider value is increased by one (minus decreases by one.) I only want the plus button to do anything if the current .value is less than .max (and the other way around for the minus button.) I want to use .min, .max and .value to avoid hardcoding values into the comparisons. 如果单击加号按钮，则滑块值将增加一（减号将减少一。）我仅希望加号按钮在当前.value小于.max时做任何事情（反之亦然）。 ）我想使用.min，.max和.value以避免将值硬编码到比较中。
What happens: it only seems to work when the slider is within the 130-something to 150-something range. 会发生什么：只有当滑块在130到150范围内时，它才似乎起作用。 I have no idea why. 我不知道为什么。
2 个解决方案
解决方案1
-1 2016-07-04 10:25:27
Change : 变更：
if (brushSizeRef.value < brushSizeRef.max) {
To : 至 ：
if (brushSizeRef.value < parseInt(brushSizeRef.max)) {
Final code : 最终代码：
<html> <head> </head> <body> <p>Brush size: <span id="currentSize"></span> </p> <button id="buttonMinus">-</button> <input type="range" id="brushSize" min="1" max="140" value="20" /> <button id="buttonPlus">+</button> <br /> <script> window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded() { var buttonMinusRef = document.getElementById("buttonMinus"); var buttonPlusRef = document.getElementById("buttonPlus"); var brushSizeRef = document.getElementById("brushSize"); buttonMinusRef.addEventListener("click", incrementBrushSize, false); buttonPlusRef.addEventListener("click", incrementBrushSize, false); function incrementBrushSize() { if (this.id == "buttonPlus") { /* Plus Button was clicked. */ if (brushSizeRef.value < parseInt(brushSizeRef.max)) { brushSizeRef.value++; drawSize = brushSizeRef.value; console.log("it works"); } else { console.log("it doesn't work"); } } else { /* Minus Button was clicked. */ } } } </script> </body> </html>
解决方案2
-1 2016-07-04 10:38:33
parseInt(brushSizeRef.value). parseInt（brushSizeRef.value）。 The type of brush.min , brush.max, brush.value is string this is the reason it is not working. brush.min，brush.max，brush.value的类型是字符串，这是它不起作用的原因。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.