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() {}.

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to use HTML and CSS to switch the style of a dynamic decimal number to either Roman numerals or Katakana characters within a specified HTML element, such as a tag, div

I've searched everywhere but only found guides on list styling and counter styling in CSS that didn't work out. So, for example, I have a number inside an HTML tag that is changed dynamically using Vue Watch. I want to display the number in upper ...

Convenient way for users to easily choose an icon from a vast selection of icons

I am currently working on a web application that allows users to create new categories. These categories are then inserted into a database using form post. Each category should have an icon associated with it, and I want users to be able to select the ico ...

Transform the text color of a table generated by a v-for loop

I have a Vue.js setup to exhibit a collection of JSON data which consists mainly of numbers. These numbers are displayed in a table format, with one minor issue - if the number happens to be negative, the text color of its cell needs to be red. <table& ...

transferring information to d3.js

I have a json object structured in the following way { "tweet":[ {"text": "hello world"}, {"text": "hello world"} ] } When I check the console output of "data" in my code below, it shows me an Object tweet: Array[131]. However, when I l ...

The Yeoman Angular Coffee router is not routing properly and displays an error message "cannot GET"

Struggling with getting the router to load a basic template after setting up a Yeoman angular scaffolder installation. Here's my configuration: // index.html <body ng-app="mvmdApp"> <div class="container" ng-view=""></div>// not ...

Undefined value is encountered when passing props through the Context API in a REACT application

Exploring My Context API Provider File (Exp file) import react form 'react'; import {createContext} from "react"; export const ContextforFile = createContext(); export function ContextData(props){ let rdata=props.data return( &l ...

Placing a moveable object in a designated spot for dropping at the desired location

I've been attempting to clone and drop a draggable object at the exact position within a droppable area where the drop event takes place. While I have come across examples online that demonstrate appending draggables to droppables, they all tend to re ...

Issue with Submit Button Functionality in Django Form Submission

I'm currently facing an issue with an HTML template I built using Bootstrap. My problem lies in the fact that I have a JavaScript function that dynamically adds rows to a Django form with specific fields whenever I need to. However, when I add a row, ...

Monitor modifications to documents and their respective sub-collections in Firebase Cloud Functions

Is it possible to run a function when there is a change in either a document within the parent collection or a document within one of its subcollections? I have tried using the code provided in the Firebase documentation, but it only triggers when a docume ...

Looking for assistance in setting a new initial state for a javascript toggle on page load

Need assistance with customizing the Youtube-TV JS plugin for a client website? The current setup loads the player with a playlist in an open state, but the requirement is to load it with the toggle closed, displaying the array of playlists instead. If y ...

The art of creating an asynchronous function: A comprehensive guide

My goal is to download files from a Firebase bucket and then store them in a database. I need the download process to be asynchronous, ensuring that each file is fully downloaded and added to an array before moving on to the next one. However, my current ...

Tips on elevating a dragged div above all other elements when utilizing two scrollbars

Currently, I have two horizontal scrollers where I need to drag a div from the upper scroller to the lower scroller. While this functionality is working properly, there is an issue with the dragged div getting lost under the borders of the scroller during ...

There is an issue with the syntax in your for-loop control where a closing parenthesis is missing

When I try to navigate through the arrays from 1 to 4 in the given JSON data, Firebug shows me an error message: SyntaxError: missing ) after for-loop control [Break On This Error] for( x in LGIntake.corpCodeOptions.marketSegment.1){ StartI...aseId=0 ...

What could be the reason for the CORS failure when making requests from an HTTPS domain to an HTTP localhost

I have a secure rest service (implemented as an Azure Function), hosted on HTTPS, under domain A. My website is also running securely on HTTPS but on domain B. I've set the CORS to use a wildcard *. Using jQuery on my website, I send Ajax requests ...

Switching over the database for a session away from using ajax

I am currently working with an XML API that interacts with a database. My website utilizes the functions of this XML API to retrieve data from the database. I am facing a challenge where I need to update the database based on the user's selection on t ...

Notify other viewers that a button has been activated

I'm working with a basic HTML file that contains two buttons. When one of these buttons is pressed, I want to notify another user in some way within a few seconds. <html> <body> <input type="button" value="Button 1"& ...

Develop a client-side API utilizing various libraries

After completing the server side of an API that delivers HTML via JSON using REST through CodeIgniter, I am now exploring how to create a client-side API with JavaScript. The goal is to retrieve data from the server through the API, display it in the DOM, ...

Material UI: Easily adjusting font size within Lists

When developing forms with react js and material UI, I encountered an issue with changing the font size within lists to achieve a more compact layout. The code fontSize={10} didn't seem to have any effect regardless of where I added it. Is there a wa ...

After converting from php/json, JavaScript produces a singular outcome

After running a PHP query and converting the result to JSON using json_encode, I noticed that when I try to print the results using echo, only one entry from the query is output in JSON format. My objective is to make this information usable in JavaScript ...

Issue in Wordpress: ReferenceError - '$' is not defined

Currently utilizing WordPress and attempting to access the following code snippet. I am encountering an error on the last line }(jQuery)); (function($) { $(function () { // Slideshow 3 $("#slider3").responsiveSlides({ auto: true, pag ...