Значение элемента HTML Range не обновляется с помощью функции Angular6
Я пытаюсь получить доступ к изменяющимся значениям ряда ползунков диапазона HTML.
Вот как они создаются:
<li *ngFor = "let rgbVal of rgbVals; let i=index">
{{i}}: {{rgbVal}} <br>
<div class = "color-box" [style.backgroundColor] = "rgbVal"></div>
<div class = "slideContainer" >
<input type = "range" min = "1" max = "100" value = "30" class = "slider" id = "shade{{i}}" step = "1" (change) = "update(i)" >
</div>
</li>
Это функция Typescript, которая есть у меня в моей функции .ts, которая должна иметь доступ к значению ползунков:
update(i){
var id = "shade"+i;
var slider = document.getElementById(id);
console.info(slider.getAttribute("value"));}
Значение после перемещения ползунка остается постоянным и неизменным, независимо от того, какой ползунок я перемещаю или насколько я его перемещаю.
Интересно, что если я запустил этот код:
update(i){
var sliders = document.getElementsByClassName("slider");
console.info(sliders);}
Затем в консоли откройте контейнер HTML и посмотрите на поле значения каждого ползунка, оно обновляется при перемещении.
Я тоже пробовал
slider = sliders[i];
console.info(slider.getAttribute("value");
И это оставалось неизменным независимо от изменений, даже несмотря на то, что этот ползунок при просмотре как часть объекта ползунков позволял обновлять значение.
Я сбит с толку этим и не могу найти никаких похожих ошибок в Интернете, поэтому любая помощь будет принята с благодарностью.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваша проблема в том, что slider.getAttribute("value") считывает значение атрибута, а не значение ввода, поэтому он всегда будет говорить 30.
Что вам нужно:
update(i: number) {
const id = `shade${i}`;
const slider = document.getElementById(id) as HTMLInputElement;
console.info(slider.value);
}