I've called two functions in my HTML
<body onload="myFunction()" onmousemove="myFunction1()">
I want to execute these two functions from a javascript file and call this file in my HTML like
<script type="text/javascript" src="path/to/functions.js"></script>
i.e. both the functions will be called from the javascript file, not from html.
I have tried
window.addEventListener('load', myFunction());
window.addEventListener('onmousemove', myFunction1());
or
$(window).load(function () {
myFunction();
});
$(window).onmousemove(function () {
myFunction1();
});
but failed.
What should I do ?
DETAILS
I have a javascript file where some functions are there.
script.js
function myFunction() {
alert("This is my function");
}
function myFunction1() {
alert("This is my second function");
}
I called these functions in my html body tag
<body onload="myFunction()" onmousemove="myFunction1()">
Now I want to call these two functions from my script.js like
window.addEventListener('load', myFunction());
window.addEventListener('onmousemove', myFunction1());
what should I do ?
I think you have understood my requirement.
Your code should read like this:
window.addEventListener('load' , myFunction );
window.addEventListener('mousemove' , myFunction1 );
But if it still does not work for you, Try this:
window.onload = myFunction ;
window.onmousemove = myFunction1 ;
Check this: onload and this: onmousemove
Try
function number1(){
document.querySelector("#info").innerHTML = "LOAD";
}
function number2(){
var x = event.clientX;
var y = event.clientY;
document.querySelector("#info").innerHTML = "MouseMove: ( x:"+x+" , y:"+y+") ";
}
window.onload = function(){
number1()
}
window.onmousemove = function(){
number2()
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="info">waiting</div>
</body>
</html>
I think You should verify that your (.js) file is loaded with the page or not?
Because i have tried both the example and both r working
window.addEventListener('load', myFunction); and window.addEventListener('load', myFunction());
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
window.addEventListener('load', myFunction);
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
or
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
window.addEventListener('load', myFunction());
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Close window</title>
</head>
<body>
<button id="abc" onclick="temp1()">button</button>
<script type="text/javascript">
function temp1() {
alert("temp1");
};
function temp2() {
alert("temp2");
}
document.getElementById("abc").addEventListener("click", temp2, false);
</script>
</body>
</html>
but I want to show "temp2" first, and then show "temp1"
Is that possible? or the event execution order depends on the browser so I can't change it?
thanks for help!!
Please review this one:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Close window</title>
</head>
<body>
<!-- here is your first AddEventlistener-->
<button id="abc" onclick="temp1()">button</button>
<script type="text/javascript">
function temp1() {
alert("temp1");
};
function temp2() {
alert("temp2");
}
/*then here is your second AddEventlistener*/
var d = document.getElementById("abc");
d.addEventListener("click", temp2, false);
/*javascript will execute it in order
if you want to change the order. remove first EventListener then register new one after. something like this:
*/
//remove listener
d.onclick = null;
//register new
d.addEventListener('click', temp1);
</script>
</body>
</html>
There are a couple of ways in which you can guarantee the order here:
document.getElementById("abc").addEvenListener("click", function() {
temp2();
temp1();
}, false);
Another option would be:
function temp2() {
alert();
temp1(); // call temp1 at the end of temp2
}
document.getElementById("abc").addEventListener("click", temp2, false);
I am trying to call the immediate function defined in test1.js on click of the button defined under html file. It always throws error "test is undefined". I am little bit aware that being a immediate function, it calls immediately, and so it returns the "undefined error". But is there any way I can call the immediate function (access methods, properties, etc.) on click of the button?
Thank you in advance.
//test1.js
var test = (function(){
alert(window);
var tmp = 'hello';
}());
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="test1.js"></script>
<input type="button" id="btn1" value="ClickMe!" />
<script type="text/javascript">
var btn = document.getElementById("btn1");
btn.addEventListener("click",fun1,false);
function fun1(){
alert(test.tmp);
}
</script>
</body>
</html>
You have to modify your code so that the IIFE returns an object with a tmp property. Such as
var test = (function(){
alert(window);
var tmp = 'hello';
return {tmp:tmp};
}());
You need to explicitly return an object containing any data you want made available after you run the IIFE. (Just add the return as I did to the snippet below).
//test1.js
var test = (function(){
alert(window);
// you need to return any values you want accessible
return {
tmp: "hello"
}
}());
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="test1.js"></script>
<input type="button" id="btn1" value="ClickMe!" />
<script type="text/javascript">
var btn = document.getElementById("btn1");
btn.addEventListener("click",fun1,false);
function fun1(){
alert(test.tmp);
}
</script>
</body>
</html>
Hi I am trying to call the namespace JavaScript which is given in the internal JavaScript in below HTML representation.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function() {
ns.message(var );
}
message :function(var ) {
alert('msg');
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
</body>
Is that possible? I am not able to call that namespace JavaScript function in the body.
Call it like this:
ns.sampleAlert();
Read this link to have more understanding on JavaScript Namespace
You probably need to do something like the following.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function(messageText) {
ns.message(messageText);
},
message : function(text) {
alert('msg ' + text);
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
<script type="text/javascript">
ns.sampleAlert("this text will be displayed in the alert");
</script>
</body>
If i click button i want to call inside function hello.is it possible to call ?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script>
function hai(){
alert("hai fun");
function hello(){
alert("hello function");
}
}
</script>
</head>
<body>
<button onclick="hello()">click here</button>
</body>
</html>
The functions defined within another function won't be accessible outside the function unless they have been attached to an object that is accessible outside the function.
function hai(){
alert("hai fun");
}
function hello(){
alert("hello function");
hai();
}
<button onclick="hello()">click here</button>
DEMO
set it to a variable:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script>
function hai(){
alert("hai fun");
whatYouAreLookingFor = function hello()
{
alert("hello function");
}
whatYouAreLookingFor();
}
</script>
</head>
<body>
<button onclick="hai()">click here</button>
</body>
</html>
Here is a way to call the inner function but it requires modifying the code of the outer function and passing in a variable to grab the inner function.
HTML
<body>
<button onclick="funcVariable()">click here</button>
</body>
Javascript
var funcVariable;
function hai(funcVar) {
funcVar = function hello() {
alert("hello function");
};
return funcVar
}
funcVariable = hai(funcVariable);
Pressing the button will now show the alert.
See JSFiddle
I have an Html file like this:
<!doctype html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/boxClass.css" />
<script type="text/javascript">
/* lightBox class */
function box (id1,id2) {
this.boxBackgroundDiv = document.getElementById (id1);
this.boxWorkAreaDiv = document.getElementById (id2);
}
lightBox.prototype.setBackgroundColor = function(c) {
this.boxBackgroundDiv.style.backgroundColor = c;
alert('Hello back');
};
function init (id1,id2)
{
boxObj = new box (id1,id2);
alert ("Hello");
}
</script>
</head>
<body onload="init('box1','box2')">
<div id="lightbox1" class="boxBackground">I am here</div>
<div id="lightbox2" class="boxWorkArea"><button onclick="boxObj.setBackgroundColor('Red')">I am here</button></div>
</body>
</html>
Now when I call my init function the way it is in this code via it works fine. But if I do as below via window.onload, it does not work. its not able to get the div ids in this case. But I need div ids to crate objs for my class.
<!doctype html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/boxClass.css" />
<script type="text/javascript">
/* lightBox class */
function box (id1,id2) {
this.boxBackgroundDiv = document.getElementById (id1);
this.boxWorkAreaDiv = document.getElementById (id2);
}
lightBox.prototype.setBackgroundColor = function(c) {
this.boxBackgroundDiv.style.backgroundColor = c;
alert('Hello back');
};
function init (id1,id2)
{
boxObj = new box (id1,id2);
alert ("Hello");
}
window.onload = init ("box1",box2);
</script>
</head>
<body>
<div id="lightbox1" class="boxBackground">I am here</div>
<div id="lightbox2" class="boxWorkArea"><button onclick="boxObj.setBackgroundColor('Red')">I am here</button></div>
</body>
</html>
Two issues:
1) You are missing quotes around box2 parameter,
2) You are assigning the return value of init function (which here is a void) to window.onload handler.
You should assign the onload handler as below:
window.onload = function(){
init ("box1","box2");
}