Пользовательский метод запускается только один раз в методе addEventListener?

Я пытаюсь связать событие «oninput» элемента диапазона ввода с пользовательским методом, объявленным в соответствующем файле машинописных файлов.Пользовательский метод запускается только один раз в методе addEventListener?

Ниже приводится HTML элемент:

<input type="range" id='motivation-grade' value="3" min="1" max="5">

Это код прослушиватель событий, который я использую в методе ngOnInit моего angular2 компонента:

ngOnInit() { 
    this.elem = document.getElementById('motivation-grade'); 
    this.elem.addEventListener("click", this.motivation(document.getElementById('motivation-grade').value)); 
    }

Здесь мотивации (ул: строка) метод, я хочу показать некоторые ссылки на основе выбранного значения каждый раз, когда пользователь меняет его. Но метод мотивации() запускается только один раз при запуске, и после этого он, похоже, не попадает. Может ли кто-нибудь помочь мне понять, чего мне не хватает?

источник

2017-01-12 Jayant Pareek

, кто звонит 'ngOnInit' – brk

ли' this.motivation' возвращение функция? Если нет, то это обман [Как передать параметр функции, используя в 'addEventListener'?] (Http://stackoverflow.com/q/12024483/4642212). – Xufox

@Xufox - это правильно. Вы также должны избегать прямого манипулирования DOM с угловым 2. – n00dl3

Я предполагаю, что вы используете Angular2. Если вы хотите инициировать событие на входном клике, вы можете сделать что-то вроде этого.

<input type="range" id='motivation-grade' (click)="onInputClick(3)" value="3" min="1" max="5">

В состав вашего машинописного файла может входить этот файл.

public onInputClick(value){ 
    //do something ... 
}

Попытка избежать прямого манипулирования DOM в угловых 2. Это плохая практика

источник

2017-01-12 16:22:38

Спасибо Рудре, однако я получаю «неопределенный» при попытке получить доступ к значению с помощью вашего пути. Какие-либо предложения ? –

@Jayant Вам необходимо передать фактическое значение, когда вы используете (щелкните) на входе. Это может быть либо переменная, либо фактическое значение, которое вы хотите передать в этом случае (щелкните) = "onInClick (3)" –

Но тогда это полностью завершает цель этой функции, правильно? Мне нужно обновленное значение каждый раз, когда пользователь меняет его. Кстати, я решил проблему, используя var self = this в моем ngOnInit, а затем используя его в моей функции addEventListener. Спасибо за помощь. –

Избегайте прямого манипулирования DOM. Как Rudraprasad предложил использовать
<input type="range" id='motivation-grade' (click)="onInputClick($event)" value="3" min="1" max="5">
вы можете распечатать событие, используя
onInputClick(event):void{ console.log(event); } , скорее всего, нужное значение будет сохранено в event.target.value

источник

2017-01-12 18:56:15

ответ

Смежные вопросы