how to call function within the function in jquery - javascript

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

Related

How to execute function with arguments, inside another function with Javascript?

i am trying to create simple app using Jquery, but I am stuck, i have two basic functions, first which holds the event, and second function, where i want to call first function, code here:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="test" onclick="funct1(event,id)">clcik1</button>
<button id="test2" onclick="mySecondFunction()">clcik2</button>
<script>
const funct1 = function myFunction(event,id) {
alert(event.target.id);
};
function mySecondFunction(){
return funct1()
}
</script>
</body>
</html>
problem is, first function holds (event and id), Accordingly when i call this function into my second function it throwing errors. I want, when i click second button executes first function... any solutions?
You should pass the arguments to mySecondFunction in onClick and in the js you should take it in mySecondFunction and pass it to funct1. Like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="test" onclick="funct1(event,id)">clcik1</button>
<button id="test2" onclick="mySecondFunction(event,id)">clcik2</button>
<script>
const funct1 = function myFunction(event,id) {
alert(event.target.id);
};
function mySecondFunction(event,id){
return funct1(event,id)
}
</script>
</body>
</html>
you need to pass the arguments into your second function:
const funct1 = function myFunction(event,id) {
alert(event.target.id);
};
function mySecondFunction(e, id){
return funct1(e, id)
}
and on the the button
<button id="test2" onclick="mySecondFunction(event, id)">clcik2</button>
Something like this ?

Why in button tag onclick=methodname is not giving output but onclick=operation gives output

In the below code if I change background color of Submit button with onclick="document.getElementById('s').style.background='green'" then it changes perfectly but if I do it with function call then it doesn't work which I tried for Clear button. I have commented the functions. Answer me if you have any solution for this.
function open() {
x = document.getElementById('s');
x.style.background = "green";
}
function close() {
document.getElementById('c').style.background = "red";
}
<!DOCTYPE html>
<html>
<head>
<title>Events-code with me</title>
</head>
<body>
<h1>Changing style</h1>
<button id="s" onclick="document.getElementById('s').style.background='green'">Submit</button>
<button id="c" onclick="close()">Clear</button>
</body>
</html>
close() is a method on the window object when you name your function as close and you called on click. the browser engine called the windows close() method, not your close method. A simple way to solve this is to rename your function.
function open() {
x = document.getElementById('s');
x.style.background = "green";
}
function closeX() {
document.getElementById('c').style.background = "red";
}
<!DOCTYPE html>
<html>
<head>
<title>Events-code with me</title>
</head>
<body>
<h1>Changing style</h1>
<button id="s" onclick="document.getElementById('s').style.background='green'">Submit</button>
<button id="c" onclick="closeX()">Clear</button>
</body>
</html>
Check out this snippet:
<!DOCTYPE html>
<html>
<head>
<title>Events-code with me</title>
</head>
<body>
<h1>Changing style</h1>
<button id="s" onclick="openX();">Submit</button>
<button id="c" onclick="closeX();">Clear</button>
<script type="text/javascript">
function openX() {
x = document.getElementById('s');
x.style.background = "green";
}
function closeX() {
document.getElementById('c').style.background = "red";
}
</script>
</body>
</html>
Actually when you use open(); and close();, it will call window.open(); and window.close();. In JavaScript, all global variables (like document)and functions(for eg alert()) belongs to window object (as window.documentand window.alert()).
To make those functions work, you must rename them, which I have done above.
The open() method is a default method of JS to opens a new browser window or a new tab, so change it with any other method name, for example
function openModal() {
x = document.getElementById('s');
x.style.background = "green";
}
<button id="s" onclick="openModal">Submit</button>
I'tried ur code with function call i'ts because open() and close() are an inbuilt function in javascript and don't forget to write ur js code in tag :)
Give an another function name instead of open and close

Javascript immediate function call from external function

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>

Call <body onload="function()"> in javascript file

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>

How to call javascript function from vbscript

how to call javascript function from vbscript.
i wrote like this
<script type="text/vbscript">
jsfunction()
</script>
<script type="text/javascript">
function jsfunction()
{
alert("Hello")
}
</script>
but it is showing that type mis match how to achieve it. please help me.
Thank you,
Mihir
Assuming you want this client side as opposed to ASP;
If you place the JScript block before the VBScript block (or wire the call to a load event) that will work fine. (IE only of course)
...
<head>
<script type="text/vbscript">
function foo
call jsfunction()
end function
</script>
<script type="text/javascript">
function jsfunction()
{
alert("hello");
}
</script>
</head>
<body onload="foo()">
...
Calling a VBScript function from Javascript
Your VBScript:
Function myVBFunction()
' here comes your vbscript code
End Function
Your Javascript:
function myJavascriptFunction(){
myVBFunction(); // calls the vbs function
}
window.onload = myJavascriptFunction;
Alternatives (incompatible in some IE versions):
// This one:
window.onload = function(){ myVBFunction(); }
// This will also work:
window.onload = myVBFunction();
// Or simply:
myVBFunction();
// From a hardcoded link, don't write a semicolon a the end:
link
Inversed:
Calling a Javascript function from VBScript
Function myVBFunction()
myJavascriptFunction()
End Function
Try this ...
<%# Language=VBScript %>
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language="JavaScript" >
function jsfunction()
{
alert("Hello")
}
</script>
<%
Response.Write "Calling =" jsfunction() "."
%>
</BODY>
</HTML>
Instead of alert we should write return which is in turn print the values on page using response.write-
code is below -
<%# Language=VBScript %>
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language="JavaScript" runat="server">
function test() {
return "Test";
}
</script>
<%
Response.Write "Value returned =" & test() & "."
%>
</BODY>
</HTML>

Categories