Adding multiple functions on <body onload> - javascript

I am trying to add multiple onload functions into my <body>
My current code:
<body onload="_googWcmGet(number, '1800 000 000'); initialize()">
The _googWcmGet is working but the second function isn't working... Please help!

document.body.addEventListener( 'load', function1, false );
document.body.addEventListener( 'load', function2, false );
// etc.
Or, if you're using jQuery, just use as many of these as you need:
$(function(){ … });
$(function(){ … });
$(function(){ … });

There is no different how many statements you wrote in onload event:
function f() {
console.log('f');
}
function g() {
console.log('g');
}
<body onload="f(); g()"></body>
I believe you have an error in your first function:
function f() {
console.log(undefinedVariable);
}
function g() {
console.log('g');
}
<body onload="f(); g()"></body>
As you see, the g() won't execute as there is an error in the first function.

I modified the code provided above with a JQuery instead of a $. This code is now working well.
Correct Code - Functioning Well:
jQuery(document).ready(function() {
_googWcmGet('number', '1800 198 885');
initialize();
});

It seems that console.log is the problem. Take a look at this link
https://developer.mozilla.org/en-US/docs/Web/API/Console.log

Calling multiple functions onload is possible like you did, see article. Here are other ways:
I
function init() {
_googWcmGet(number, '1800 000 000');
initialize();
}
<body onload="init()">
//or
window.onload = init;
II
$(document).ready(function() {
//or
//$(function() {
_googWcmGet(number, '1800 000 000');
initialize();
});

Related

Trigger function only on "onclick"

Hello I need a function to run when an a tag is clicked. I am using the onclick="" but it seems that the function runs on page load, instead of waiting to run when the a tag is clicked on. How do I make it so the function only runs when the a tag is clicked?
Here is my code.
HTML:
<a class="req_btn" onclick="conversionOne()">text</a>
<script type='text/javascript'>
(function conversionOne() {
alert("something");
})();
</script>
Thanks!
You are invoking the function when the script loads using an IIFE. Instead of this:
(function conversionOne() {
alert("something");
})();
Do this:
function conversionOne() {
alert("something");
}
You are using a self-executing function.
Declare the function in the global scope without executing it.
function conversionOne() {
alert("something");
}
Doing this
(function(){
/** code **/
})();
Means the code will be executed imediatelly.
in your case you want to create a function so you need this :
function conversionOne() {
/** code **/
}
or
var conversionOne = function () {
/** code **/
}
(function conversionOne() {
alert("something");
})();
calling function like this will work onload
Change this to
function conversionOne() {
alert("something");
};
More info

Reference error: myFunc is not a function

I'm having a problem with my function that is showing type error. In summary I've the code like below:
function myFunc(){
alert('test');
}
//if I run myFunc() here then it runs
myFunc();//alerts test
$('.selector').click(function(){
myFunc();//type error:: how to call the function?
});
Sorry, if this is a stupid question.
Update
I've just reproduced my key problem:
demo
window.onload = function(){
function myFunc(){
alert('test');
}
}
$('.test').click(function(){
myFunc();//doesn't alert test
});
myFunc is scoped to the function it is declared inside.
Move it outside or move the event handler assignment inside.
// Define this in a script element after the element you are trying to select
function myFunc(){
alert('test');
}
$('.test').click(function(){
myFunc();
});
// or use this anywhere
window.onload = function(){
function myFunc(){
alert('test');
}
$('.test').click(function(){
myFunc();
});
}
// but if you are going to use jQuery, you might as well go the whole hog
// and also just wait for the DOM to be ready instead of allowing time for images
// and other external resources to load too.
$(function(){
function myFunc(){
alert('test');
}
$('.test').click(function(){
myFunc();
});
});
Your function is defined in the scope of another function and is unreachable. You should put it in the scope of the calling function, e.g.:
function myFunc() {
alert('test');
}
$(function() {
$('.test').click(function() {
myFunc();
});
});

Pass function to a jquery key event?

I have a function foo(peram) which I want to call from multiple jquery .keyup() events.
How can I define/pass function foo so that I can call it from inside the event?
I tried something like this:
function foo(peram) {
alert(peram);
}
$("#someElement").keyup(function(alert) {
foo("You pressed a key!");
});
However I get TypeError: foo is not a function.
Update:
I have removed everything from my script and html, and it still does not work.
html:
<html>
<head>
<script src="../jquery-1.10.2.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
</head>
<body onload="asdf()">
<input type="text" name="name">
</body>
</html>
test.js:
function asdf() {
function hqxftg(stuff) {
alert(stuff);
}
$(document).ready(function() {
$('[name="name"]').keyup(function(hqxftg) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
}
It does seem to work in jsfiddle for some reason.
It is because you have named the event parameter same as the function
function asdf() {
function hqxftg(stuff) {
alert(stuff);
}
$(document).ready(function () {
$('[name="name"]').keyup(function (event) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
}
The event callback keyup receives the event object as the first parameter, you are naming it as hqxftg which overrides the external scoped function name.
Also there is no need to use the onload="", you can just use the dom ready callback
jQuery(function ($) {
function hqxftg(stuff) {
alert(stuff);
}
$('[name="name"]').keyup(function (event) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
You are missing a couple of things...
1) You miss the ; at the end of calling foo()
2) You are missing tags to close the jQuery selector
When you try this it will work:
function foo(peram) {
alert(peram);
}
$("#someElement").keyup(function(alert) {
foo("You pressed a key!");
});
JSFiddle here...
Update: Post has been updated and original comment of mine becomes obsolete.
I would go with the comment of Derek.
I am able to reproduce the problem: JSFiddle
Is it correct you have also foo declared as a var?
Try this code.
HTML
<input id="someElement" />
Java script:
function foo(peram) {
alert(peram);
}
$( document ).ready(function() {
$("#someElement").keyup(function() {
foo("You pressed a key!");
});
});
Demo

Load javascript after 5 seconds after page has loaded?

I have tried the following:
<body id="myBody" onload = "setTimeout('a()', 5000)" / >
Is this the correct method? The reason why I want to do this is because I have my entire website animating in (such as fade ins) on page load. Having my javascript only makes the animation unsmooth.
Any feedback appreciated.
This code will work. Just set your time in milliseconds and write your JS code on loadAfterTime function:
<script>
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
// code you need to execute goes here.
}
</script>
window.addEventListener("load", function () {
animation();
setTimeout(otherOperation, 5000);
}, false);
function animation() {}
function otherOperation() {}
maybe you can use code like this
<body id="myBody" onload = "setTimeout(a, 5000)">
Try this
if you are using jQuery your animation has a callback that you can use to delay the firing of all other javascript events like so:
$( window ).on( 'load', function () {
$( '.someElements' ).animate({
// properties to animate
}, 300, function () {
initScripts();
});
});
function initScripts () {
// call all other functions here
}
The Browser is always load all of your script if any when you open the web page. So It depend on when you call your javascript functions.
Try this:
document.ready(function(){
// your code
});
or
$(function(){
// your code
});
both of them make sure that all of element on your page have been loaded.

Call in a function another function JQuery

I have two JQuery funciont and i need to start one of them in one function. This is my example:
<script type="text/javascript">
$(document).ready(function aa() {...... })
</script>
And i want to call this function in another:
<script type="text/javascript">
function hello(){
aa();
}
</script>
Need a tiny bit of restructuring to move aa out of $(document).ready at top of your code so you can use it elsewhere also
/* call aa as ready handler*/
$(document).ready(aa);
/* aa now global*/
function aa() {
$('#catAssociate tbody tr').contextMenu('myMenu2', {
bindings: {
'open': function (t) {
console.log("chiamo ioooo");
DeleteAction(t, "Open");
},
}
});
}
aa is unaccessible because you defined it within $(document).ready, try putting it in global scope
function aa() {
...
}
$(document).ready(aa);
and in your other script you can call it as such
function hello(){
aa();
}

Categories