JQuery DOM读取输入值为数字

Question

我遇到的问题是，我想读取输入类型=“范围”的输入值。这适用于普通的JavaScript，但我现在只能使用JQuery。我已经尝试过的：

curValue = $("#radioVolume").val();

这是它返回的错误

Argument of type 'string | number | string[]' is not assignable to parameter of type 'string'.

[ng]类型'number'不能分配给'string'类型。

现在我尝试将其转换为数字：

curValue = parseInt($'#radioVolume').val()); // and
curValue = parseFloat($'#radioVolume').val());

在阅读了一些过去的Stack Overflow问题之后，我找到了一个答案说要做到这一点：

curValue = parseFloat($'#radioVolume').val()).toFixed(2);

所有这些解决方案都不起作用。

//编辑（解决方案）：它现在有效，我不必将其转换为以下数字：curValue = $("#radioVolume").prop('value')。

Answer 1

使用DOM值函数的Range元素的值类型定义为String https://www.w3schools.com/jsref/prop_range_value.asp（请参阅返回值）

请注意，范围<input min=1 max=2 step=0.1 type="range">的min，max和step属性不会更改返回的类型。它仍然是一个字符串，虽然字符串中表示的值是一个浮点数（“1.1”，“1.2”等）

Range元素的JQuery val（）函数将返回一个整数，一个字符串或一个数组：http://api.jquery.com/val/取决于元素，在范围的情况下是一个字符串。

我建立了你这个小提琴http://jsfiddle.net/j62Lheo8/来比较typeof DOM和JQuery选择器范围值。

// HTML

<div id="banner-message">
  <p>The range chaos</p>
  <input id="range-selector" min=1 max=2 step=0.1 type="range"/>
  <span id="range-value">JQ Value</span>
  <span id="range-type"></span>
  <span id="dom-range-value">DOM Value</span>
  <span id="dom-range-type"></span>
</div>

// JS

var banner = $("#banner-message")
var range = $("#range-selector")
var value, type, domvalue, domtype;
// handle click and add class
range.on("change", function(){
 value = $("#range-selector").val()
 type = typeof value

 domvalue = document.getElementById("range-selector").value
 domtype = typeof domvalue

 $("#range-value").text(value)
 $("#range-type").text(type)
 $("#dom-range-value").text(domvalue)
 $("#dom-range-type").text(domtype)

})

所以基本上你需要对字符串中表示的类型进行显式强制。

当range返回的字符串包含整数表示时，请使用parseInt（）。当range返回的字符串包含浮点数的表示形式时，请使用parseFloat（）（步骤为浮点示例的情况：步长= 0.1）。