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.
Related
i have a question, there is a problem with a function in a program that i was doing in javascript.
The function is supposed to work when you click on a paragraph, but when i click, the javascript console throws this: "Uncaught ReferenceError: donethingy is not defined
Line: 1".
JS:
window.onload = function(){
var thy = document.getElementById("thy");
var commanderIssue = document.getElementById("commanderIssue");
var listado = document.getElementById("thaCosa");
var thyLy = document.getElementsByTagName("p");
var nli;
var thyText;
var inserting = "a";
var commander = "b";
thy.onclick = function(){
inserting = "* " + prompt("Create a new item");
nli = document.createElement("p");
thyText = document.createTextNode(inserting);
nli.appendChild(thyText);
listado.appendChild(nli);
thyLy = document.getElementsByTagName("p");
}
thyLy.onclick = function donethingy(){
// thyLy.textDecoration.overline;
alert("done");
}
commanderIssue.onclick = function(){
alert("this thing is");
}
}
With the syntax you've used, the name donethingy doesn't actually become the name of the function because you are assigning the funciton's code directly to the onclick property of thyLy.
You could do this:
// This is a function declaration that associates a name with the function
function donethingy(){
// thyLy.textDecoration.overline;
alert("done");
}
// Then the function can be referred to or invoked by name
thyLy.onclick = donethingy;
But, when you create and assign the function in one statement, the function effectively becomes anonymous as it is stored and accessible via the property you assigned it to.
The decision to create a function declaration or an anonymous function requires you taking the following into account:
Anonymous functions can't easily be reused.
Anonymous functions can't easily be unit tested.
Named functions may require more memory, but can be reused and can be
easily unit tested.
You do not set variables or onclick properties to functions defined as:
obj.onclick = function <name>() {}
You set to anonymous functions, like you did for commanderIssue.onclick.
Just remove the name of the function to make it anonymous:
thyLy.onclick = function() {
alert("done");
}
It's good to remember that there are two ways of defining functions:
Declarations, which are executed when you invoke them:
function donethingy() { ... }
Expressions, which are executed when variable statements are executed:
thyLy.onclick = function() { ... }
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.
My objective is to change the border style of button elements when they are clicked with javascript. I made a function setBorder and assigned to the onclick event on all button elements as:
function setBorder(myobj) {
myobj.style.borderStyle = "inset";
}
var menubtn = document.getElementById("menu_btn");
menubtn.onactive = setBorder(menubtn);
The problem here is that the border style is changed as soon as the page loads because when javascript is parsed the function setBorder() is executed due to the brackets (). Another alternative I thought was:
function setBorder() {
this.style.borderStyle = "inset";
}
var menubtn = document.getElementById("menu_btn");
menubtn.onactive = setBorder;
I thought this would take the object menubtn -- but this didn't happen. Why didn't this take the object menubtn?
I think there could be a way in which setBorder could be linked as the prototype object of all button elements. The prototype object would have a function func_SetBorder as it's property. Then we could call the func_setBorder as:
menubtn.onclick = menubtn.func_setborder;
This solution achieves what you're looking for via the use of a function closure.
var buttons = [ ... ]; // An array containing the buttons
for (let b of buttons) {
b.onactive = onActive(b);
}
function onActive(button) {
return function () {
button.style.borderStyle = 'inset';
}
}
Well, in JavaScript, when you use this keyword inside function in this it will points to an object on which you call your function. So, you have your function like this
function myFunc() {
this.do_smth;
}
and then you call it: my_obj.myFunc(), then, inside your myFunc thiswill points to my_obj.
Assume that you want to call your function with another object:
obj_foo.myFunc()
In this case this inside your function will points to obj_foo
If you want to call your function with different objects (but you must be sure that your objects have yhe same properties) its better to use call/apply or bind.
bind will say to your function "this is the scope which you should work with". But you should always bind your function to different objects in case of using this. More pretty and safely way is to use call/apply. You also should call your function with call/apply each time like with bind, but it looks more better.
So, your code should be like this: setBorder.call(menubtn)
What you want is binding or binding arguments. Javascript provides a native way to bind a function. If you want to bind arguments only, you can use this method as quoted from here:
Function.prototype.arg = function() {
if (typeof this !== "function")
throw new TypeError("Function.prototype.arg needs to be called on a function");
var slice = Array.prototype.slice,
args = slice.call(arguments),
fn = this,
partial = function() {
return fn.apply(this, args.concat(slice.call(arguments)));
// ^^^^
};
partial.prototype = Object.create(this.prototype);
return partial;
};
You would use it like this:
function setBorder(myobj) {
myobj.style.borderStyle = "inset";
}
var menubtn = document.getElementById("menu_btn");
menubtn.onactive = setBorder.arg(menubtn);
Or:
function setBorder() {
this.style.borderStyle = "inset";
}
var menubtn = document.getElementById("menu_btn");
menubtn.onactive = setBorder.bind(menubtn);
By CSS
#menuBtn:active{
border-style:inset;
}
By Javascript
You should try the eventlistener property as
menubtn.addEventListener("mousedown", setBorder);
menubtn.addEventListener("mouseup", removeBorder);
and inside the setBorder and removeBorder function you can use this
Assign it to a variable.
var functionName = function () {
//things
}
If you want this to be menubtn in the setBorder function, you need to bind it :
menubtn.onclick = setBorder.bind(menubtn)
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();
};
I want to know how can i do it?
e.g.
function get() {
alert(s);
}
function declare() {
var s = "Blah";
get();
}
But I get that s is not defined.
I know we can do by passing it as argument and also setting it as global variable but how without both of them?
You can use a closure:
function declare() {
var s = "Blah";
function get() {
alert(s);
}
get();
}