How can I assign a function to an element using JavaScript? - javascript

I want something like this:
div.onclick = function(x, y);
How can I do this without executing the function?
I don't want to use jQuery.

Putting () after the function will call it. So don't do that.
div.onclick = function; // Note: function is a keyword and can't really be used as a variable name
That won't call the function with the arguments you want though. Event handler functions are always called with one argument: the event object.
You need to create a new function to call yours with those arguments.
function myhandler(event) {
function(x, y); // Still not a valid name
}
div.onclick = myhandler;

var NewFunction = function(x){
// your function code
};
div.onclick = NewFunction;

var myFunction = function(x,y){
//Some code here
};
div.onclick = function(){ return myFunction(x, y); }
In the second function assignment you ofcourse should replace x and y with something known to that context.

Related

Passing Object Parameter To Another Function - Javascript

The current code fails because element.style.backgroundColor = "yellow" is not referencing the object that I passed in as a parameter (mydiv).
How do I give func2 the reference to the element "mydiv"? I know this code does not require func2, as what can be done in func2 can be done in func1, but for my actual code I need to pass the object to another function.
How can I do this in JavaScript without jquery?
Thanks.
function func1() {
var a = document.getElementById("mydiv");
a.style.backgroundColor = "black";
function func2(a);
}
function func2(element) {
element.style.backgroundColor="yellow";
}
There is no need to use function in order to call func2, function keyword only use when you need to define new function.
function func1() {
var a = document.getElementById("mydiv");
a.style.backgroundColor = "black";
func2(a);
}
function func2(element) {
element.style.backgroundColor="yellow";
}
Just remove the word function from function func2(a);.
Your code should look like this.
function func1() {
var a = document.getElementById("mydiv");
a.style.backgroundColor = "black";
func2(a); //You just need to update this line.
}
function func2(element) {
element.style.backgroundColor="yellow";
}
Try to google for JavaScript Hoisting to get more details.

Make a local function as global

In Javascript with ProcessingJS.
If I define a function outside the draw function, how can I pass this function to the draw function (without copying and pasting inside the draw function)?
var myFunction = function()
{
code;
}
var draw = function(){
myFunction();
};
How do you make a function global?
I use a limited environment, Khan Academy, and only the simplest functions and commands are available.
Thanks for your replies, and sorry to be a beginner.
You could pass your function as a parameter. For example:
var myFunction = function() {code;}
var draw = function(f) { f(); };
draw(myFunction);
I use Khan Academy too. There are strict syntax rules that don't make sense anywhere else. To answer the question,
var myFunction = function () {
/* Stuff */
}, draw = function () {
myFunction();
};
will work just fine.
What you are asking for is to call myFunction inside the draw function.
Here is how you would do that:
var myFunction = function(){
//your code here
}
var draw = function(fun){
fun();
}
Basically, if you want to call myFunction() inside the draw() function, you have to pass a function into draw(), this is called a parameter. Like so: var draw = (fun) Here, fun is a function being passed into draw. Now you just need to call it using fun();
Good luck!
You're using invalid syntax. If you want to make a global function and call it inside draw(), just declare it like a regular function:
var myFunction = function () { // <-- note the "=" sign and "function" keyword here
code;
};
var draw = function (){
myFunction();
};

How can I call a function from another function in javascript

In JavaScript how to call a function from another function. My function is called Cheese and it alerts a hello cheese by passing it to another variable called X. I am practicing javascript functions.
function cheese() {
return function() {
alert('hello cheese');
};
}
var x = cheese();
alert(x);
Now x is a function so you need to invoke it
var x = cheese();
alert(x());
Also since you want to alert the value returned by x, probably you want to return a value from the inner function instead of calling an alert - other wise first the alert in the inner function will be shown then an alert saying undefined will be shown as the inner function is not returning anything.
function cheese() {
return function() {
return ('hello cheese');
};
}
Demo: Fiddle
To pass a function along, assign it to your variable like so:
function foo() {
alert("hello");
}
var bar = foo;
Then call the function like so:
bar();
When you call cheese(), it returns a function.
So, when you do:
var x = cheese();
x now contains a function reference. When you then do:
alert(x);
you're doing an alert on that function reference (which isn't generally a very interesting thing to do because it doesn't execute that function).
If you wanted to execute that function, you would do this:
function cheese() {
return function() {
alert('hello cheese');
};
}
var x = cheese(); // x now contains the inner function that cheese() returned
x(); // will run the returned function which will execute the alert() in the function

assign a copy of a function to a var

Is it possible to define a function and then assign copies of the function to different vars?
This is essentially how far I've got...
function add(x, y){
return x + y;
}
var function1 = new add()
var function2 = new add()
This doesn't seem to work as it's trying to run the add function each time. The same goes for
var function1 = new function add()
Do I need to be using prototype in some way or am I looking at it in the wrong way?
This should do the trick
var function1 = add;
var function2 = add;
You are evaluating the function. To assign the function itself to a variable, use
var function1 = add;
var function2 = add;
However, it's not quite clear why you want to copy the function.
if your just trying to create references to the function just make this modification
function add(x, y){
return x + y;
}
var function1 = add;
var function2 = add;
After which you are able to call the functions like this.
function1(10,11);
function2(1,2);
A function in Javascript is an object as any other.
You can create many references to the same function and store them for example in an array
function add(x, y) {
return x + y;
}
var v = [add, add, add, add];
alert(v[3](33, 9)); // Will show 42
The only "magic" thing happens when you call a function getting it from an object member lookup
x = {};
x.f = add;
x.f(12, 3); // Returns 15
the "strange" thing that will happen is that this inside the function when called that way will be the object, and not the global window object as it happens when you call a function directly.
This also means that, confusingly enough,
x.f(z);
is not the same as
[x.f][0](z);
or as
var ff = x.f;
ff(z);
because in the first case this will be x, in the second case this will be the array instead and in the third case it will be the global window object.

How do I set a javascript variable to the return of an inline function?

I'm using the code:
var x = function() {return true;};
trying to set x to true, the return value of the function, but instead x is defined as the function itself. How can I set x as the return value of the function? I could easily code around this problem by using a non-inline function or some such, but it bugs me because I'm sure there must be a simple solution.
Thanks.
The solution is to define the function and then invoke it (by adding the extra parentheses at the end):
var x = ( function() {return true;} ) ();
You're not executing the function, you're setting x to actually be the function.
If you had some variable y, it could take on the value of the function with something like:
var x = function(){ return true; };
var y = x(); // y is now set to true.
or alternatively execute the function in place with:
var x = (function(){ return true; })();
Your code just defines the function and assigns it to x, the function doesn't get called. To call it, put the function in parenthesis and add () after it, like for a normal function call:
var x =
(
function () {
return true;
}
)();

Categories

Resources