Utilizing a function as an argument in another function (with specified parameters)

Question

Utilizing a function as an argument in another function (with specified parameters)

I’m stuck and can’t seem to solve this problem.

In my function, the parameter filter needs to be a function call that accepts an object created within the same function:

function bindSlider(time, filter)
{

   var values = {
     min : 8,
     max : 9
   };

   filter(values);
}

Now I'm not sure how to correctly call bindSlider, I initially thought it would look like this:

bindSlider(time, function(values) {/*do something here with the values from bind slide*/});

However, this results in an error:

ReferenceError: fliter is not defined

I am aware that I could do the following:

function filter(values) {

}

bindSlider(time, filter);

But I want to define filter differently for each call, so I am looking for a pattern like function() {}.

javascript function-pointers

Answer 1

Answer №1

After conducting my own tests, I can confirm that it indeed functions as intended. The only issue I encountered was that your object utilized = instead of :. For instance:

function bindSlider(time, filter) {
   var values = {
       min: 8,
       max: 9
   };
   filter(values);
}

bindSlider(10, function(values) {
   var html;
   for (var i in values) {
       html = document.getElementById('test').innerHTML;
       document.getElementById('test').innerHTML = html + '<br />' + values[i];
   }
});

JSFiddle

Answer 2

After conducting my own tests, I can confirm that it indeed functions as intended. The only issue I encountered was that your object utilized = instead of :. For instance:

function bindSlider(time, filter) {
   var values = {
       min: 8,
       max: 9
   };
   filter(values);
}

bindSlider(10, function(values) {
   var html;
   for (var i in values) {
       html = document.getElementById('test').innerHTML;
       document.getElementById('test').innerHTML = html + '<br />' + values[i];
   }
});

JSFiddle

Answer 3

Answer №2

By ensuring that your code is properly structured and the object is correctly formatted, you can eliminate the error message. Additionally, double-check that you are passing the time parameter correctly to the bindSlider function.

var values = {
  min: 8,
  max: 9
};

Therefore:

function bindSlider(time, filter) {

 var values = {
   min: 8,
   max: 9
 };

 filter(values);

}

bindSlider(1000, function (values) {
  console.log(values); // { min: 8, max: 9 }
});

Check out this Fiddle.

Answer 4

By ensuring that your code is properly structured and the object is correctly formatted, you can eliminate the error message. Additionally, double-check that you are passing the time parameter correctly to the bindSlider function.

var values = {
  min: 8,
  max: 9
};

Therefore:

function bindSlider(time, filter) {

 var values = {
   min: 8,
   max: 9
 };

 filter(values);

}

bindSlider(1000, function (values) {
  console.log(values); // { min: 8, max: 9 }
});

Check out this Fiddle.

Utilizing a function as an argument in another function (with specified parameters)

Answer №1

Answer №2

Similar questions

Determine the number of occurrences of specific values within a group of objects based on a

Switch the website title as soon as the user looks away from the tab

What is causing the issue with Vue.js :class not functioning properly when it relies on a property of a list

Steps for initiating a $.ajax POST request from a client to a server

Create a spinner control on an HTML webpage with the help of JavaScript

In one application, there are two connections established with mongoose. The purpose of the second connection is to establish a dependency on the

There are multiple sets of radio buttons within nested ng-repeats, but only the final group displays the selected value

Struggling to update the state of an array using ReactJS and unsure of how to iterate through it

Express.js encounters a 404 error when router is used

Dealing with asynchronous tasks in JavaScript

Achieve horizontal wrapping of div elements

What is the best way to eliminate concealed divs from the view source of a webpage?

Child functional component does not refresh after its props are altered by its parent component

"Exploring the interactivity of touch events on JavaScript

Listener for clicking on a marker in Google Maps

Showing user data in a div using JavaScript ajax without the use of jQuery

The unzipper will disregard any empty directories within the file

The componentDidUpdate method is functioning by comparing the previous state with the current state on different triggers

Guide on testing a function with a dependency in Angular through unit testing

Intermittent occurrence of (404) Not Found error in the SpreadsheetsService.Query function