2016-07-04 7 views
0

私は、スライダ(入力の種類= "範囲")と一緒に動作するプラスとマイナスのボタンを作成しようとしています。 しかし私はそれが期待どおりに動作しません。私はバイオリンを作成しました:JavaScriptを入力範囲range.valueと入力range.max

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>

このコードのための私の考えは次のとおりです。ユーザーは、プラスまたはマイナスボタンのいずれかをクリックします。プラスボタンをクリックすると、スライダーの値が1つ増えます(マイナス1つ減ります)。 現在の.valueが.maxより小さい場合は、プラスボタンに何もしないでください。 。) 比較に値をハードコーディングしないようにするには、.min、.max、および.valueを使用します。

何が起こるのですか?スライダーが130から150までの範囲にある場合にのみ動作するように見えます。なぜ私は考えていない。

答えて

0

変更:

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>

+0

@Phrosenもしあなたが助けてくれたら、それを記してください。 – Ehsan

-1

のparseInt(brushSizeRef.value) 。 brush.min、brush.max、brush.valueの型は文字列です。これが動作しない理由です。

+0

typeofを使用せずに、変数にどのデータ型があるか調べることはできますか?多分、コンソールを使うのだろうか? –

+0

isNANは、番号であるかどうかを判断する1つのことです –

関連する問題