JQuery DOM Чтение входного значения как числа

Question

У меня проблема в том, что я хочу прочитать входное значение типа ввода = "диапазон". Это работало с простым JavaScript, но я могу сделать это только с JQuery прямо сейчас. Что я уже пробовал:

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

Это ошибка, которую он возвращает

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

[ng] Тип 'число' нельзя назначить типу 'строка'.

Теперь я попытался преобразовать его в число с:

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

Прочитав несколько прошлых вопросов о переполнении стека, я нашел ответ, говорящий, что сделать это:

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

Все эти решения не работали.

// РЕДАКТИРОВАТЬ (РЕШЕНИЕ): Теперь это работает, и мне не нужно преобразовывать его в число со следующим: curValue = $("#radioVolume").prop('value').

Answer 1

Тип значения элемента Range с использованием функции значения DOM определяется как String https://www.w3schools.com/jsref/prop_range_value.asp (см. Возвращаемое значение)

Обратите внимание, что атрибуты min, max и step диапазона <input min=1 max=2 step=0.1 type="range"> не изменяют возвращаемый тип. Это все еще строка, хотя значение, представленное в строке, является плавающей точкой («1.1», «1.2» и т. Д.)

Функция JQuery val () для элемента Range возвращает целое число, строку или массив: http://api.jquery.com/val/ в зависимости от элемента, в случае диапазона - строка.

Я построил вам эту скрипку http://jsfiddle.net/j62Lheo8/, чтобы сравнить значения диапазона типов селекторов 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)

})

Так что в основном вам потребуется явное приведение к представленному типу внутри строки.

Используйте parseInt (), когда строка, возвращаемая range, содержит представления целых чисел. Используйте parseFloat (), когда строка, возвращаемая range, содержит представления с плавающей точкой (случай, когда step является примером с плавающей точкой: step = 0.1).