Why does the custom method only trigger once with the addEventListener?

Question

Why does the custom method only trigger once with the addEventListener?

I am attempting to connect the "oninput" event of an input range element to a custom method defined in a corresponding typescript file.

Here is the HTML element:

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

This is the code for the event listener that I am using in the ngOnInit function of my Angular 2 component:

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

In the motivation(str:string) method, I intend to display some links based on the selected value whenever the user changes it. However, the motivation() method only executes once at the beginning and then does not appear to be triggered again. Could someone assist me in understanding what I might be overlooking?

javascript angular typescript dom-events addeventlistener

Answer 1

Answer №1

It seems like you are working with Angular 2. If you need to activate an event when a user clicks on an input, you can achieve it this way.

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

In your component's Typescript file, include the following code snippet.

public onInputClick(value){
  //perform some action ...
}

It is recommended to avoid direct manipulation of the DOM in Angular 2 as it is considered a poor practice.

Answer 2

It seems like you are working with Angular 2. If you need to activate an event when a user clicks on an input, you can achieve it this way.

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

In your component's Typescript file, include the following code snippet.

public onInputClick(value){
  //perform some action ...
}

It is recommended to avoid direct manipulation of the DOM in Angular 2 as it is considered a poor practice.

Answer 3

Answer №2

It is best to avoid manipulating the dom directly. Following Rudraprasad's advice, you can utilize

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

To print the event, use the following code:

onInputClick(event):void{
    console.log(event);
    }

The desired value is most likely stored in event.target.value

Answer 4

It is best to avoid manipulating the dom directly. Following Rudraprasad's advice, you can utilize

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

To print the event, use the following code:

onInputClick(event):void{
    console.log(event);
    }

The desired value is most likely stored in event.target.value

Why does the custom method only trigger once with the addEventListener?

Answer №1

Answer №2

Similar questions

Delegating events after removing a class

Session authentication mechanism designed to remain active only as long as the browser tab is open

Include an item in a Vuetify model's array of objects

Once the stripe token is generated, proceed to submit the form

Exploring the implementation of if/else statements in Sass/HTML

What is the reason buttons in mat-menus do not submit?

Rollup faces challenges when trying to bundle source code alongside Bazel and Typescript

Tab-based Ionic 2 advertising campaign featuring banners

Determine the time left and check the speed of file uploads using ajax with jquery or javascript

Using document.getElementById will only target a single item

Remove every other element from a JSON Array by splicing out the even-numbered items, rather than removing matching items

Tips on dividing a div into two separate pages when converting to PDF

Transfer the data in the columns of Sheet1 to Sheet2 and eliminate any duplicates using Google App Script

A step-by-step guide on increasing native Time variables in JavaScript

Guide on Implementing jQuery Plugin with Vue, Webpack, and Typescript

Aligning the second heading alongside pictures and a lightbox

The Jasmine unit test encountered an issue when trying to read the 'id' property of a null value, resulting in an error

JavaScript onclick event on an image element

Enhance user experience with Angular Material and TypeScript by implementing an auto-complete feature that allows

Displaying iframes in AngularJS using a service