I need to access the link_id value from this specific actionid and then execute the corresponding function within the Ionic framework

Question

I need to access the link_id value from this specific actionid and then execute the corresponding function within the Ionic framework

I have a JavaScript code in my TypeScript file. It retrieves the attribute from a span element when it is clicked. I want to store this attribute's value in a TypeScript variable and then call a TypeScript function.

Take a look at my ngOnInit method, all I need is to assign the value of link_id to this.actionid and then invoke the callpagedata() function.

Here is the JavaScript code inside my home.ts:

actionid;
 ngOnInit(){
var mainDiv = document.getElementById("mainDiv");
mainDiv.addEventListener("click", function (event) {
  console.log("Inside Event Listener");
  event.preventDefault();
    var link_id = $(event.target).attr("action");
    console.log("Actionid is:: " + link_id);
});
}

All I want is to have the value of link_id stored in this.actionid and then be able to call the callpagedata() function. I attempted using this.actionid = linkId but encountered issues with accessing actionid within the event listener and link_id outside of it.

callpagedata(){

}

The HTML code found in home.html is as follows:

<div id="mainDiv">
  <span action="10004">Quick Task</span>
  <span action="10006">Quick Patrol</span>
</div>

javascript angular typescript ionic-framework ionic2

Answer 1

Answer №1

In an event handler, you might want to reference the 'this' object which represents the current event listener object. To achieve this, assign the main function's 'this' object to a variable like this_parent = this, and then access it using this_parent.actionid:


    actionid;
    ngOnInit(){
        var mainDiv = document.getElementById("mainDiv");
        let this_parent = this;
        mainDiv.addEventListener("click", function (event) {
            console.log("Inside Event Listener");
            event.preventDefault();
            var link_id = $(event.target).attr("action");
            console.log("Actionid is:: " + link_id);
            this_parent.actionid = link_id;
    });
    }

Answer 2

In an event handler, you might want to reference the 'this' object which represents the current event listener object. To achieve this, assign the main function's 'this' object to a variable like this_parent = this, and then access it using this_parent.actionid:


    actionid;
    ngOnInit(){
        var mainDiv = document.getElementById("mainDiv");
        let this_parent = this;
        mainDiv.addEventListener("click", function (event) {
            console.log("Inside Event Listener");
            event.preventDefault();
            var link_id = $(event.target).attr("action");
            console.log("Actionid is:: " + link_id);
            this_parent.actionid = link_id;
    });
    }

Answer 3

Answer №2

If you're looking to avoid using jQuery, I suggest incorporating Angular instead.

However, if you prefer sticking with your current code, you can achieve the desired outcome like this:

In Typescript:

ngOnInit(){
    var mainDiv = document.getElementById("mainDiv");
    mainDiv.addEventListener("click", function (event) {
      console.log("Inside Event Listener");
      event.preventDefault();
        console.log(event.target);
        var link_id = (<HTMLElement>event.target).getAttribute('action');
        // in TypeScript, we need to specify that event.target is an HTMLElement.
        console.log("Actionid is:: " + link_id);
    });
}

I tested this code and it functions properly. Nonetheless, I highly recommend utilizing Angular Events, which would look something like this:

In HTML:

<div id="mainDiv">
  <span (click)="myFunction(10004)">Quick Task</span>
  <span (click)="myFunction(10006)">Quick Patrol</span>
</div>

In Typescript:

myFunction(value: number): void {
    console.log('my value', value);
}

I trust this information proves beneficial to you.

Answer 4

If you're looking to avoid using jQuery, I suggest incorporating Angular instead.

However, if you prefer sticking with your current code, you can achieve the desired outcome like this:

In Typescript:

ngOnInit(){
    var mainDiv = document.getElementById("mainDiv");
    mainDiv.addEventListener("click", function (event) {
      console.log("Inside Event Listener");
      event.preventDefault();
        console.log(event.target);
        var link_id = (<HTMLElement>event.target).getAttribute('action');
        // in TypeScript, we need to specify that event.target is an HTMLElement.
        console.log("Actionid is:: " + link_id);
    });
}

I tested this code and it functions properly. Nonetheless, I highly recommend utilizing Angular Events, which would look something like this:

In HTML:

<div id="mainDiv">
  <span (click)="myFunction(10004)">Quick Task</span>
  <span (click)="myFunction(10006)">Quick Patrol</span>
</div>

In Typescript:

myFunction(value: number): void {
    console.log('my value', value);
}

I trust this information proves beneficial to you.

I need to access the link_id value from this specific actionid and then execute the corresponding function within the Ionic framework

Answer №1

Answer №2

Similar questions

In Typescript, the module source is imported rather than the compilation output

Typescript's way of mocking fetch for testing purposes

Keep track of the input values by storing them in an array after they are

What is the best way to send put and delete requests through a form using node.js and express.js?

The interplay between javascript and PL/SQL tasks in a dynamic scenario

Please refrain from submitting the form until the slow AJAX jQuery process has finished

Error: "Access-Control-Allow-Origin" header is missing in Firebase Function

Tips for including a decimal point in an angular reactive form control when the initial value is 1 or higher

Learning how to effectively utilize the tap and map functions in Angular

In order to use the serve command, it is necessary to run it within an Angular project. However, if a project definition cannot be located

After installing the latest version of Node.js, the stability of the Ionic environment

Using Node.js, express, jade, highcharts, and a 2D array

How can a property be made mandatory in Typescript when another property is set as optional?

Center the popover over the element

Turning off form validation in AngularJS for a short period of time

Nested data selection in React

Hear and register keypress in Angular service

The Mongoose query for the id field retrieves both the id and _id values

When working with formControlName in Angular Material 2, the placeholder may overlap the entered value

The Redux Toolkit Slice is encountering an issue where it generates the incorrect type of "WritableDraft<AppApiError> when the extraReducer is