JavaScript 比较 input range.value 和 input range.max答案

【问题标题】：JavaScript compare input range.value with input range.maxJavaScript 比较 input range.value 和 input range.max
【发布时间】：2016-07-04 18:55:07
【问题描述】：

我正在尝试创建一个加号和一个减号按钮以与滑块一起使用（输入类型 =“范围”）。但是它并没有像我期望的那样工作。我创建了一个小提琴：

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>

我对这段代码的想法是：用户点击加号或减号按钮。如果单击加号按钮，则滑块值增加一（减一）。如果当前 .value 小于 .max ，我只希望加号按钮执行任何操作（反之，减号按钮。）我想使用 .min、.max 和 .value 来避免将值硬编码到比较中。

会发生什么：它似乎只在滑块位于 130 到 150 左右的范围内时才起作用。我不知道为什么。

【问题讨论】：

标签： javascript html

【解决方案1】：

parseInt(brushSizeRef.value)。 Brush.min、brush.max、brush.value 的类型是字符串，这是它不起作用的原因。

【讨论】：

是否可以找出变量的数据类型（不使用 typeof）？也许通过使用控制台？
isNAN 是一回事，它会判断它是否是一个数字

【解决方案2】：

改变：

 if (brushSizeRef.value < brushSizeRef.max) {

收件人：

 if (brushSizeRef.value < parseInt(brushSizeRef.max)) {

最终代码：

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

【讨论】：