Sending an array of functions to the onClick event of a button

Question

Sending an array of functions to the onClick event of a button

Having difficulty with TypeScript/JavaScript

Currently working with an array of functions like this

private listeners: ((name: string) => void)[] = [];

Successfully adding functions to the array within another function.

Now looking to trigger those functions on button press

button.onclick = function(){
   this.listeners.forEach((callback) => callback(username));
}

When attempting to execute this code, nothing happens. It appears to be due to lack of recognition of listeners.

Next attempt was

button.onclick = function(listeners){
       listeners.forEach((callback) => callback(username));
}

Now encountering tsc error

error TS2339: Property 'forEach' does not exist on type 'MouseEvent'.

Suspecting a missing type declaration, but unsure how to specify that this array consists of functions of type

((name: string) => void)[] = [];

If anyone has a quick workaround, it would be greatly appreciated. And just to address any potential questions: I can confirm that the add function did increase the size of the listeners array at least (it's reassuring - :D).

javascript arrays typescript

Answer 1

Answer №1

Ensuring that 'this' remains pointing to the current class instance is crucial when defining your onclick handler. One way to achieve this is by structuring it as follows:

private handleOnClick(event)
{
    this.callbacks.forEach((func) => func(parameter));
}

//Later on in the code 
button.onclick = (event) => this.handleOnClick(event);

Answer 2

Ensuring that 'this' remains pointing to the current class instance is crucial when defining your onclick handler. One way to achieve this is by structuring it as follows:

private handleOnClick(event)
{
    this.callbacks.forEach((func) => func(parameter));
}

//Later on in the code 
button.onclick = (event) => this.handleOnClick(event);

Answer 3

Answer №2

The main issue you're facing is that the reference to this is not pointing to the context you expect. Instead, this is referring to the context of the MouseEvent in your click handler.

One way to solve this problem is by using Function.prototype.bind().

Replace

button.onclick = function(){ 
   this.listeners.forEach((callback) => callback(username));
}

With

button.onclick = function(){ 
   this.listeners.forEach((callback) => callback(username));
}.bind(this);

Here's a simple explanation:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Answer 4

The main issue you're facing is that the reference to this is not pointing to the context you expect. Instead, this is referring to the context of the MouseEvent in your click handler.

One way to solve this problem is by using Function.prototype.bind().

Replace

button.onclick = function(){ 
   this.listeners.forEach((callback) => callback(username));
}

With

button.onclick = function(){ 
   this.listeners.forEach((callback) => callback(username));
}.bind(this);

Here's a simple explanation:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Answer 5

Answer №3

An advanced method to tackle your problem is to avoid using onclick and instead utilize addEventListener. You can take advantage of a lesser-known technique by passing an object with a handleEvent method to addEventListener, eliminating all concerns with this:

class Bar {

  private observers: ((name: string) => void)[] = [];

  constructor(button) {
    button.addEventListener('click', this);
  }

  handleEvent(event) {
    // validate event type
    this.observers.forEach(callback => callback(username));
  }

}

const new Bar(document.getElementById('myButton'));

Answer 6

An advanced method to tackle your problem is to avoid using onclick and instead utilize addEventListener. You can take advantage of a lesser-known technique by passing an object with a handleEvent method to addEventListener, eliminating all concerns with this:

class Bar {

  private observers: ((name: string) => void)[] = [];

  constructor(button) {
    button.addEventListener('click', this);
  }

  handleEvent(event) {
    // validate event type
    this.observers.forEach(callback => callback(username));
  }

}

const new Bar(document.getElementById('myButton'));

Answer 7

Answer №4

Appreciate the responses!

I realized that directly adding a function wouldn't work because it's an Eventhandler function, which operates somewhere else in the code but not where I initially defined it.

So, I switched to using `addeventhandler` and defined a function within my function. I then called a new function for the Eventhandler, which in turn calls the function it should execute. #funcception :D

let triggerOnClick = () => {
        let username = tf_name.value;
        this.listeners.forEach((callback) => callback(username));
    };

    btn_enter.addEventListener("click", () => {
        triggerOnClick();
    });

And voila, that code is now functioning perfectly :)

Answer 8

Appreciate the responses!

I realized that directly adding a function wouldn't work because it's an Eventhandler function, which operates somewhere else in the code but not where I initially defined it.

So, I switched to using `addeventhandler` and defined a function within my function. I then called a new function for the Eventhandler, which in turn calls the function it should execute. #funcception :D

let triggerOnClick = () => {
        let username = tf_name.value;
        this.listeners.forEach((callback) => callback(username));
    };

    btn_enter.addEventListener("click", () => {
        triggerOnClick();
    });

And voila, that code is now functioning perfectly :)

Sending an array of functions to the onClick event of a button

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Component not appearing in Storybook during rendering

The date format is malfunctioning -> Error: The date provided is not valid

What causes a delay in the start of a child process in Node.js?

How do I incorporate global typings when adding type definitions to an npm module?

Refreshing CSS-Element-Queries following an ajax request

Tips for correctly displaying diacritics with Webpack and Typescript

Ways to create a looping mechanism with specified number restrictions and limitations

Tips for Designing a Custom Footer Layout for KoGrid

Increase the dimensions of the jQuery modal confirmation box

Is there a way to have multiple app.post functions for the same route using express()?

Executing mathematical calculations within a JavaScript object

"Troubleshooting: State array in ReactJS/NextJS not rendering correctly following setState

Parsing error: Unforeseen token encountered. Consider adding a supplementary loader to manage the output of these loaders

I am confused about the process of mounting components

I am unable to integrate Autoprefixer into an Express project

What is the best way to extract raw data from a kendo dataSource?

Accessing weather information in React with Ajax

Why Mixin Class inference is not supported in Typescript

When a React Native TextInput is focused, it restricts the ability to press other child components

In Typescript, which kind of event is suitable for MouseEvent<HTMLDivElement>?