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

【问题标题】：How can I grab an HTML slider value as an integer for JavaScript?如何获取 HTML 滑块值作为 JavaScript 的整数？
【发布时间】：2020-11-20 16:34:27
【问题描述】：

我正在尝试从 HTML 滑块中获取一个值，以便可以在 JavaScript 中动态地将其用作整数。
我遇到的问题是我似乎无法将该值用作正确的值整数。
例如，如果我的滑块值为 5，如果我尝试将其存储在变量中并添加 10，则它将输出为“510”。
也许我是个白痴，错过了一些非常基本或简单的东西，但它最后总是以字符串结尾。
我也尝试过 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 += 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>

【问题讨论】：

标签： javascript html variables slider

【解决方案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 将继续是一个字符串，因为它没有被改变

【讨论】：

我感觉我犯了一个愚蠢的错误，我应该知道我没有再次定义 a 并且使用 parseInt 错误大声笑谢谢你的帮助！

【解决方案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

【讨论】：

感谢您的帮助，我上面的函数中有 parseInt，但我使用不正确