如何为 JavaScript 获取 HTML 滑块值作为整数？

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);    }超文本标记语言<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)但返回的整数值没有得到正确处理，您应该这样做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

您需要使用 将字符串解析为 int parseInt。

工作代码：

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