私は、スライダ(入力の種類= "範囲")と一緒に動作するプラスとマイナスのボタンを作成しようとしています。 しかし私はそれが期待どおりに動作しません。私はバイオリンを作成しました: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までの範囲にある場合にのみ動作するように見えます。なぜ私は考えていない。
@Phrosenもしあなたが助けてくれたら、それを記してください。 – Ehsan