如何获取 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) 但返回的整数值没有被正确处理，你应该这样做 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>

Working JSFiddle

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

How can I grab an HTML slider value as an integer for JavaScript?

html

javascript

variables

slider