如何为 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");&nbsp;&nbsp; &nbsp; var outputUnit = document.getElementById("amtOutput");&nbsp; &nbsp; var a = 0;&nbsp; &nbsp; var b = 10;&nbsp; &nbsp; outputUnit.innerHTML = sliderUnit.value;&nbsp; &nbsp; sliderUnit.oninput = function(){&nbsp; &nbsp; &nbsp; &nbsp; outputUnit.innerHTML = this.value;&nbsp; &nbsp; &nbsp; &nbsp; console.log(sliderUnit.value);&nbsp; &nbsp; &nbsp; &nbsp; a = this.value;&nbsp; &nbsp; &nbsp; &nbsp; a = parseInt(a); // Change this line&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; function test(){&nbsp; &nbsp; &nbsp; &nbsp; b += a;&nbsp; &nbsp; &nbsp; &nbsp; console.log("b: " + b + " | a: " + a);&nbsp; &nbsp; }<div class="sliderContainer">&nbsp; &nbsp; <input type="range" min="1" max="15" value="7" id="slider">&nbsp; &nbsp; <input type="submit" value="Submit" onclick="test()" />&nbsp; &nbsp; | Slider number: <span id="amtOutput"></span></div>如果不是，变量 a 将继续是字符串，因为它没有改变

Answer 2

您需要使用 将字符串解析为 int parseInt。工作代码：var sliderUnit = document.getElementById("slider");&nbsp;&nbsp; &nbsp; var outputUnit = document.getElementById("amtOutput");&nbsp; &nbsp; var a = 0;&nbsp; &nbsp; var b = 10;&nbsp; &nbsp; outputUnit.innerHTML = sliderUnit.value;&nbsp; &nbsp; sliderUnit.oninput = function(){&nbsp; &nbsp; &nbsp; &nbsp; outputUnit.innerHTML = this.value;&nbsp; &nbsp; &nbsp; &nbsp; console.log(sliderUnit.value);&nbsp; &nbsp; &nbsp; &nbsp; a = this.value;&nbsp; &nbsp; &nbsp; &nbsp; parseInt(a);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; function test(){&nbsp; &nbsp; &nbsp; &nbsp; b = parseInt(b)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; a = parseInt(a);&nbsp; &nbsp; &nbsp; &nbsp; b += a;&nbsp; &nbsp; &nbsp; &nbsp; console.log("b: " + b + " | a: " + a);&nbsp; &nbsp; }<div class="sliderContainer">&nbsp; &nbsp; <input type="range" min="1" max="15" value="7" id="slider">&nbsp; &nbsp; <input type="submit" value="Submit" onclick="test()" />&nbsp; &nbsp; | Slider number: <span id="amtOutput"></span></div>工作 JSFiddle