JavaScript onClick changing function execution

Question

Hello
I am trying to see if a fragment of an JavaScript code can be changed within a function using "onClick". Is there a method of changing the "filterCarsByColour" to "filterCarsByMake" using an onClick function?
const filterMe = filterCarsByColour(cars)

const filterMe = filterCarsByMake(cars)

I was not able to find an ideal example of this within the web or within Stackoverflow as most of the example only include changing the innerHTML object. So any help, recommendations or directions to other posts would be truly appreciated.

Why would you want to change the function's functionality itself, rather than simply change which variable you pass to the function? This sounds like an XY problem and a security vulnerability waiting to happen. Calling filterCarsByColour(cars, 'Red') and filterCarsByColour(cars, 'Blue') should produce two different results; there should be no need to change the function itself. — Obsidian Age
– Obsidian Age, Commented Sep 3, 2018 at 21:49
@ObsidianAge Age I am trying to pass this, as when user clicks on a button it will execute one or other function, this function is further used to return the data and insert them into a table — Tom Jacob
– Tom Jacob, Commented Sep 3, 2018 at 21:55

mwilson · Accepted Answer · 2019-12-17 18:03:07Z

2

Instead of trying to change the function, it would be best to seperate those options and give the user the ability to select what type of filter they are after:

const filterBtn = document.querySelector('#filterBtn');
filterBtn.onclick = () => {
  const type = document.querySelector('#type').value;
  if (type === 'colour') {
    // TODO: execute filterCarsByColour function
    console.log('running filter by colour...');
  } else if (type === 'make') {
    // TODO: execute filterCarsByMake function
    console.log('running filter by make...');
  } else {
    // ERROR: Type not defined
  }
};

<select id="type">
  <option value="colour">By Colour</option>
  <option value="make">By Make</option>
</select>
<button id="filterBtn">
Filter
</button>

edited Dec 17, 2019 at 18:03

answered Sep 3, 2018 at 21:56

mwilson

13.1k10 gold badges65 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adz5A · Accepted Answer · 2018-09-03 21:55:28Z

You need to parameterize the filtering function you want yo use :

const makeFilter = (filterFunction) => { ... };
const FilterMe = makeFilter(byCar)(cars, "Red");

The makeFilter function should return a two arguments function which takes data as first arg, filtering argument as second (to follow your example).

Not sure about the "onClick" reference, but if you need dynamicity you could look and choose using the event:

const filteringFunctions = { 
   byCar() {}, 
   byColour() {} 
};

domNode.addEventListener("click", e => {
   const fn = filteringFunctions[e.target.getAttribute("data-filter")];
   if (typeof fn === "function") {

       // apply the filter if a function was found
       const filterMe = makeFilter(fn)(cars, "red");

   }
});

Collectives™ on Stack Overflow

JavaScript onClick changing function execution

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related