如何獲取 HTML 滑塊值作為 JavaScript 的整數？

Question

我試圖從 HTML 滑塊中獲取一個值，以便我可以在 JavaScript 中動態地將它用作整數。
我遇到的問題是我似乎無法將該值用作適當的整數。
例如，如果我的滑塊值是 5 並且我試圖將它存儲在一個變量中並添加 10，它會輸出為“510”。
也許我是個白痴，遺漏了一些非常基本或簡單的東西，但它最終總是以字符串結尾。
我也試過 parseInt() ，但它似乎沒有幫助。
我在下面設置了一個簡單的代碼示例：

JS

    var sliderUnit = document.getElementById("slider"); 
    var outputUnit = document.getElementById("amtOutput");
    var a = 0;
    var b = 10;
    outputUnit.innerHTML = sliderUnit.value;
    sliderUnit.oninput = function(){
        outputUnit.innerHTML = this.value;
        console.log(sliderUnit.value);
        a = this.value;
        parseInt(a);
    }
   
    function test(){
        b += a;
        console.log("b: " + b + " | a: " + a);
    }

HTML

<div class="sliderContainer">
    <input type="range" min="1" max="15" value="7" id="slider">
    <input type="submit" value="Submit" onclick="test()" />
    | Slider number: <span id="amtOutput"></span>
</div>

Answer 1

問題是你正在調用parseInt(a)但返回的 Integer 值沒有被正確處理，你應該這樣做a = parseInt(a);

 var sliderUnit = document.getElementById("slider"); var outputUnit = document.getElementById("amtOutput"); var a = 0; var b = 10; outputUnit.innerHTML = sliderUnit.value; sliderUnit.oninput = function(){ outputUnit.innerHTML = this.value; console.log(sliderUnit.value); a = this.value; a = parseInt(a); // Change this line } function test(){ b += a; console.log("b: " + b + " | a: " + a); }

 <div class="sliderContainer"> <input type="range" min="1" max="15" value="7" id="slider"> <input type="submit" value="Submit" onclick="test()" /> | Slider number: <span id="amtOutput"></span> </div>

如果不是，變量 a 將繼續是一個字符串，因為它沒有改變

Answer 2

您需要使用parseInt將字符串解析為 int 。

工作代碼：

 var sliderUnit = document.getElementById("slider"); var outputUnit = document.getElementById("amtOutput"); var a = 0; var b = 10; outputUnit.innerHTML = sliderUnit.value; sliderUnit.oninput = function(){ outputUnit.innerHTML = this.value; console.log(sliderUnit.value); a = this.value; parseInt(a); } function test(){ b = parseInt(b) a = parseInt(a); b += a; console.log("b: " + b + " | a: " + a); }

 <div class="sliderContainer"> <input type="range" min="1" max="15" value="7" id="slider"> <input type="submit" value="Submit" onclick="test()" /> | Slider number: <span id="amtOutput"></span> </div>

工作 JSFiddle