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

What methods can be utilized to create sound effects in presentations using CSS?

ng filtering with a controller-defined scope

How to Use Vue.js to Find the Nearest Div Element with a Specific

Tips for guiding users to a different page based on whether a linkid is associated with a specific Cat

Steps for calling a function in index.js using Node.js

Loading jQuery on Ajax can be a challenge

Customizing the Switch component individually for each item fetched from an API in React Native

Set up a WhatsApp web bot on the Heroku platform

Executing JavaScript code from an external link

How to position footer at the bottom of Material UI cards - see example below

Utilizing JFlex for efficient brace matching

What is the best way to access the iframe element?

What is the most efficient way to transfer a large search results array between NodeJS and AngularJS?

The browser is not displaying the results from Mongodb, yet they are appearing in the console

Application with menu design, similar to the layout of google.com on mobile devices

Ensuring continuous execution of JS EventListener

Is it possible for me to pass a value through props that is not currently stored in the state?

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

The functionality of sending form data via Express.js router is restricted

Experiencing challenges with ng-repeat and the concept of 'distinct'