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

Passing a property to a click event handler in ES6 with React: What's the best approach?

Triggering a dynamically created event with the onchange event

Display a free Admob banner within an Ionic 3 application

The readyState of Ajax is consistently anything but 4

Every div must have at least one checkbox checked

The radio buttons are stuck and not changing their selection

Creating a like and dislike button using Jquery's ajax functionality

Stop HTML audio playback upon clicking on a specific element

I haven't encountered any type warnings in the places where I anticipated them

What are the distinctions between generic and discriminated types?

Obtain cell information when clicking on a specific field within a material-table

Is all of the app fetched by Next.js when the initial request is sent?

A dynamic Angular component consisting of two distinct rows to be seamlessly integrated into an existing table

Using backslashes to escape JSON values within a value in Angular

Generating Javascript code with PHP and handling quotes successfully

Angular JS effectively prevents redundant data from being displayed to users when scrolling infinitely while also efficiently removing DOM elements for previous data

What are the steps for combining two constants with the JSON format of "const = [ { } ]"?

Integrate a button following the first paragraph exclusively when there are two or more paragraphs present

Discover the new method for establishing fixed column widths in the PrimeNG table now that the Autolayout property is no longer in use

After two HTML injections, Javascript ceases to function properly