Tips on invoking a function from an array in JavaScript when a button is clicked

Question

Tips on invoking a function from an array in JavaScript when a button is clicked

Being new to JavaScript, I encountered a challenge where I have an array of functions:

allFunctions = () => [
  function1(),
  function2(),
  function3(),
  function4(),
  function5(),
  function6(),
  function7(),
  function8(),
  function9()
]

My goal is to execute these functions and identify which one returns a 'true' value. Once identified, I want to reuse that specific function when a button is clicked.

When calling allFunctions(), the output is:

[false, false, false, true, false, false, false, false, false]

I am looking for assistance on how to trigger the function that returned true upon button click. Any guidance or help would be greatly appreciated. Thanks in advance.

javascript arrays function

Answer 1

Answer №1

To create an array of functions without executing them, you can use the following approach: Define multiple functions within an array and then access and execute them using Array.find() method to retrieve the first function that returns true or by utilizing Array.indexOf() method to find all functions that return true:

const fnFalse = () => false
const fnTrue = () => true

const allFunctions = [fnFalse, fnFalse, fnFalse, fnFalse, fnFalse, fnTrue, fnFalse, fnFalse, fnFalse]

const trueFn = allFunctions.find(fn => fn())

console.log(trueFn.name, trueFn())

You can apply a similar logic to the produced array named allFunctions by using Array.indexOf():

const fnFalse = () => false
const fnTrue = () => true

const fns = [fnFalse, fnFalse, fnFalse, fnFalse, fnFalse, fnTrue, fnFalse, fnFalse, fnFalse]

const allFunctions = () => [fnFalse(), fnFalse(), fnFalse(), fnFalse(), fnFalse(), fnTrue(), fnFalse(), fnFalse(), fnFalse()]

const trueFn = fns[allFunctions().indexOf(true)]

console.log(trueFn.name, trueFn())

Answer 2

To create an array of functions without executing them, you can use the following approach: Define multiple functions within an array and then access and execute them using Array.find() method to retrieve the first function that returns true or by utilizing Array.indexOf() method to find all functions that return true:

const fnFalse = () => false
const fnTrue = () => true

const allFunctions = [fnFalse, fnFalse, fnFalse, fnFalse, fnFalse, fnTrue, fnFalse, fnFalse, fnFalse]

const trueFn = allFunctions.find(fn => fn())

console.log(trueFn.name, trueFn())

You can apply a similar logic to the produced array named allFunctions by using Array.indexOf():

const fnFalse = () => false
const fnTrue = () => true

const fns = [fnFalse, fnFalse, fnFalse, fnFalse, fnFalse, fnTrue, fnFalse, fnFalse, fnFalse]

const allFunctions = () => [fnFalse(), fnFalse(), fnFalse(), fnFalse(), fnFalse(), fnTrue(), fnFalse(), fnFalse(), fnFalse()]

const trueFn = fns[allFunctions().indexOf(true)]

console.log(trueFn.name, trueFn())

Answer 3

Answer №2

If I understand correctly, here is a simple way to implement this using two buttons.

<button type="button" id="find">Find</button>
<button type="button" id="search">Search</button>

Now let's add the JavaScript code:

var functions = {
    find: function() { alert("finding..."); },
    search: function() { console.log("searching..."); }
};
document.getElementById ("find")
    .addEventListener ("click", handleClick);
document.getElementById ("search")
    .addEventListener ("click", handleClick);

function handleClick(event) {
    functions[event.target.id]();
}

You can further enhance this logic as per your requirements.

For an example, check out this JSFiddle.

Answer 4

If I understand correctly, here is a simple way to implement this using two buttons.

<button type="button" id="find">Find</button>
<button type="button" id="search">Search</button>

Now let's add the JavaScript code:

var functions = {
    find: function() { alert("finding..."); },
    search: function() { console.log("searching..."); }
};
document.getElementById ("find")
    .addEventListener ("click", handleClick);
document.getElementById ("search")
    .addEventListener ("click", handleClick);

function handleClick(event) {
    functions[event.target.id]();
}

You can further enhance this logic as per your requirements.

For an example, check out this JSFiddle.

Tips on invoking a function from an array in JavaScript when a button is clicked

Answer №1

Answer №2

Similar questions

Save to a JSON file

Refresh the page once the function has been executed

Trigger the execution of a Python script through a webpage with just the click of a button

Locate the Highest Number within a Multi-Dimensional Array and Store it in a Fresh Array

socket.io initialization and finalization events

Is it possible to log out a user in JavaScript by simply removing cookies?

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

How can TypeScript leverage the power of JavaScript libraries?

Is there a problem with addEventListener returning false?

Move the image inside the box without directly following the mouse cursor, but at a slightly faster pace

What is the best way to align a series of divs vertically within columns?

I am experiencing issues with my local MongoDB database not properly storing data when using Express and Mongoose

creating an animated loop within an Angular template

Every key must be a string or number; received a function instead

Identifying Shifts in Objects Using Angular 5

Utilize the ng2-select component to incorporate multiple instances within a single webpage

Leveraging ES6 import declarations within Firebase functions

Using Node.js, Express.js, and Redis.io for efficient order processing

The response body in Express is returned as a ReadableStream instead of the typical JSON format

Using tabs within a Dialog prevents the Dialog from adjusting its height automatically