I need to add parameter passing to this code but don't know how, i tried a few different things but it just broke the code everytime
If you need to pass parameters to your calc function, you can just create an anonymous function from the click event, add some code to gather your parameters to pass in and then call the calc function like so:
document.getElementById("currencybtn").addEventListener('click', function () {
let myParameter = 10;
calc(myParameter);
});
And then in your calc function, you can name that parameter anything you'd like. It doesn't have to be named myParameter because your calc function will use the first variable you pass to it with the first variable you put inside of the parenthesis when you call your calc function:
function calc(param1) {
//param1 is myParameter from above
//JavaScript pulls in variables based on the order they are received
return param1 + 3;
}
You can fetch the arguments from the target attribute of the event, somehing like this:
const button = document.querySelector('button');
button.addEventListener('click', calc, false);
button.randomParam = 'just a random parameter';
function calc(e)
{
window.alert(e.currentTarget.randomParam);
}
<button class="input">click me</button>
Related
$('#homeNavBar').on('click', onSiteLoad());
function onSiteLoad() {
$('#dataHolder').html('');
userLoginMenu.html('');
var h1 = $('<h1>').text('Welcome');
var span = $('<span>').text('Welcome to our book library');
dataHolder.append(h1).append(span);
}
I want to call the function onSiteLoad() directly inside change function.
The only way it lets me do it is like this:
$('#homeNavBar').on('click', function () {
$('#dataHolder').html('');
userLoginMenu.html('');
var h1 = $('<h1>').text('Welcome');
var span = $('<span>').text('Welcome to our book library');
dataHolder.append(h1).append(span);
});
You need to pass the function reference, as of now you are invoking the function as passing its return value an event handler
$('#homeNavBar').on('click', onSiteLoad);
//^^^^ Parenthesis removed
You can call the external function inside your onClick also.
$('#homeNavBar').on('click', function () {
onSiteLoad();
});
I have an array with functions: var ranArray = [funct1(), funct2()] and the functions themselves:
function funct1() {
document.write("hello");
};
function funct2() {
document.write("hi");
};
I am trying to make it so that whenever a button is pressed, either funct1 or funct2 is executed.
However, without me even pressing the button, on the page I see my button and "hellohi". Here is the function for the randomization:
function getFunctions() {
return ranArray[Math.floor(Math.random * ranArray.length)];
};
and here is the HTML:
<button type="button" name="ranButton" id="ranButton" onclick="getFunctions();">Random Button</button>
Firstly you need to store the function references ([funct1, funct2]), the () will immediately call the functions. Next you can use .call() to call the function, or more simply add () at the end of ranArray[Math.floor(Math.random() * ranArray.length)] as #jfriend00 mentioned. Also note that Math.random needs to be Math.random().
var ranArray = [funct1, funct2];
function funct1() {
document.write("hello");
};
function funct2() {
document.write("hi");
};
function getFunctions() { // Note you don't really need a 'return' here
return ranArray[Math.floor(Math.random() * ranArray.length)]();
};
Demo
Also the use of document.write() here is overwriting the DOM. So I don't recommend it, rather you may want to place this content inside a element. If you have some element of the id #foo you could instead set the text of that DOM element:
document.getElementById("foo").textContent = "...";
Demo 2
Your array declaration is actually calling funct1 and funct2 and trying to store the return values in the array. What you want is an array of functions. Remove the parentheses so the functions themselves are stored in the array rather than the return values. It should look like this:
var ranArray = [funct1, funct2];
I would like to pass a function with parameters to another function and have it run on an event, like this:
var main_object = function () {
this.main_function = function (function) {
document.addEventListener('click',function);
}
this.passed_function = function (variable) {
alert(variable);
}
}
var main_object = new main_object();
main_object.main_function(main_object.passed_function(3));
In modern JavaScript engines, you can bind the function:
mainObject.main_function(main_object.passed_function.bind(main_object, 3));
The first argument to bind will be this when the function executes and any remaining arguments to bind will be leading arguments in the call to the function.
If I understand you right,
main_object.main_function(function() { main_object.passed_function(3) });
For what you're talking about, you could just use bind. In your case, you would do:
main_object.main_function(main_object.passed_function.bind( main_object, 3 ));
function mainfunc(func) {
alert(func);
}
function callBackFn(a) {
alert(a);
}
mainfunc("arg1", callBackFn("javaScritFnParameter")); //call this in load
For sure it works no need to worry... but callbackFn will execute first and next only "arg1" will execute.
I have the javascript code for a link click:
document.getElementById('giddy').onclick = function {
alert(this.href);
};
and I want to separate the function part of it...I have
document.getElementById('giddy').onclick = poro(this);
function poro(yyyy) {
alert(yyyy.href);
};
But it is not working (says undefined in the alert)...what am I doing wrong?
You don't need to pass this as a parameter. this will be the context for the function when it is called. You should just have:
document.getElementById('giddy').onclick = poro;
function poro() {
alert(this.href);
};
Get rid of (this) and use this in the function instead of yyyy.
document.getElementById('giddy').onclick = poro;
function poro() {
alert(this.href);
};
You're immediately calling the poro function.
Essentially, you're telling Javascript that the element's onclick value will equal the result of calling the poro(this [window] ) function.
To get around this, you can wrap the poro(this) function inside an empty function, like so:
document.getElementById('giddy').onclick = function(){poro(this)} function poro(yyyy) { alert(yyyy.href); };
You may also want to consider using an eventListener, as it allows room for expansion.
Almost there! You should do:
document.getElementById('giddy').onclick = function(){ poro(this); }
function poro(yyyy) {
alert(yyyy.href);
};
Note poro(this); wrapped in an anonymous function.
I'd recommend using addEventListener instead of the onclick method.
Try this:
var giddy = document.getElementById('giddy');
giddy.addEventListener('click', function(e) { poro(this); }, false);
function poro(yyyy) {
alert(yyyy.href);
}
since you are using jquery use :
$('#giddy').click(function(){ poro($(this));});
or you can use the bind() function
$("#giddy").bind("click", $(this), poro);
Alright, so I've been looking at functions and using them as arguments. Let's say I have a function that takes a function and does it:
function run(someFunction,someArgument) {
someFunction(someArgument);
}
I see that I can pass an existing function, say:
function foo(bar) {
// foo that bar!
}
By calling run(foo,bar); I can also make up a function in an object on the fly and run it:
var whiteBoy = {
playThat: function(funkyMusic) {
// funk out in every way
}
};
And then I call run(whiteBoy.playThat,funkyMusic); What I'd like to be able to do is define a function in the call, like this:
run(/* define a new function */,relevantArgument);
How would I go about doing that?
Like this:
run(function(funkyMusic) {
// funk out in every way
}, relevantArgument);
You were very close when you wrote this:
var whiteBoy = {
playThat: function(funkyMusic) {
// funk out in every way
}
};
What you did there was define a function and assign it to the playThat property - the only change that I made was to define a function and pass it as an argument instead of assigning it to something.
run(function(when)
{
alert("play that funky music " + when);
},
"noooow!");