I want to call a function from java-script file in my html page. My code is shown below.
index.html
<!DOCTYPE html>
<html><body>
<h2>Web1</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
$(function() {
myFunction1(); // call function
});
</script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="socket.io.js"></script>
</body>
</html>
main.js
$(function() {
function myFunction1() {
alert("ff");
}
myFunction1() is my function. It is inside $(function() {}. But it is not working.
It is working when wrote in main.js
function myFunction1() { // function declaration in global scope
alert("ff");
}
How to define myFunction1() inside $(function() {} in main.js? Please help me?
Try this:
(function() {
function myFunction1() {
alert("ff");
}
})()
Notice the syntax errors in the last line })().
In my opinion it doesn't look like it really need to be nested inside the anonymous function. If you remove it it should just fine.
Try to call your function myFunction1() inside .ready() event
It will execute when the DOM is fully loaded.
<script type="text/javascript">
$(document).ready(function(){
myFunction1();
});
</script>
<!DOCTYPE html>
<html>
<head>
<!--
You can uncomment this in your case
<script type="text/javascript" src="js/main.js"></script>
-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<h2>Web1</h2>
<script>
$(document).ready(function(){
myFunction1();
});
function myFunction1() {
alert("ff");
}
</script>
</body>
</html>
Here is your answer.
Let me inform if it is helpful to you or not. Thank you!
You are missing import jQuery and syntax errors in the last line })()
Try This :
<!DOCTYPE html>
<html><body>
<h2>Web1</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
myFunction1();
});
function myFunction1() {
alert("ff");
}
</script>
</body>
</html>
OR
<!DOCTYPE html>
<html><body>
<h2>Web1</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(function(){
myFunction1();
});
function myFunction1() {
alert("ff");
}
</script>
</body>
</html>
You need jquery for using parts of it later.
Basically you need to switch function declaration and function call, because inside of jquery's onload, you need the call of the function.
Puth the function declaration outside in the global scope.
function myFunction1() { // function declaration in global scope
alert("ff");
}
$(function() {
myFunction1(); // call function
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Web1</h2>
Version with local function declaration.
$(function() {
function myFunction1() { // local function declaration
alert("ff");
}
myFunction1(); // call function
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Web1</h2>
Related
I have a form with a button written in a .asp page and when it's clicked, it calls for a js function. I need to figure a way to debug this using developer tools.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
};
</script>
</head>
<body>
some code.
</body>
</html>
I don't think this has anything to do with classic ASP.
You are missing the jQuery definition in this code, see here https://www.w3schools.com/jquery/jquery_get_started.asp
I added this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
console.log("Hello");
};
</script>
</head>
<body>
<div id="butReport">some code.</div>
</body>
</html>
When I click it I get this:
I hope this helps
button written in asp with id="butReport". Using javascript:
<button id="butReport"></button>
<script type="text/javascript">
var elem=document.getElementById('butReport').onclick = function(){
// some code
// test not using console.log();
document.getElementById('hasilnya').innerHTML = 'test';
}
</script>
<div id="hasilnya" style="margin-top:1em;"></div>
I'm very new to jQuery, but from what I've read, this doesn't make sense to me. Here is my code:
$(function() {
function grid() {
$("#main").hide();
}
});
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="numbers.js"></script>
</head>
<body>
<div id="main" style="height:90vh; width: 90vw; background-color:lightgray">
<button onclick="grid()">grid</button>
</div>
</body>
</html>
When I put$(function(){...}); around my code, it never runs and the console returns ReferenceError: grid is not defined, but if I remove $(function(){...}); then everything runs fine.
The code within $(function() { }) has its own scope, so when you define a function within that, that function only exists within that scope. However, you have:
<button onclick="grid()">grid</button>
Which looks for a function called "grid" in the global scope (where it doesn't exist).
Ideally, if you are using jQuery, you would do something more like:
<button id="grid">grid</button>
$(function(){
$('#grid').on('click', function() {
$("#main").hide();
});
});
you can call a javascript function or define onClick listener of button inside $(document).ready
// using jquery
$(document).ready(function() {
$('#grid').click(function(){
$("#main").hide();
});
});
// using javascript function
function grid(){
document.getElementById('main').style.display = 'none';
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="numbers.js"></script>
</head>
<body>
<div id="main" style="height:90vh; width: 90vw; background-color:lightgray">
<button id="grid">grid</button>
<button onclick="grid()">grid2</button>
</div>
</body>
</html>
The following code displays AAA, BBB, CCC, EEE, FFF. It skips DDD.
Could someone help why DDD is skipped. Thank you.
<!DOCTYPE html>
<html>
<head>
<script>
func1('AAA');
function func1(x) { alert(x); }
func1('BBB');
</script>
</head>
<body>
<script>
func2('CCC');
</script>
<script>
function func2(x) { alert(x); }
</script>
<script>
func2('DDD');
</script>
<script>
func3('EEE');
function func3(x) { alert(x); }
func3('FFF');
</script>
</body>
</html>
It "skips" CCC, not DDD. And the reason is shown in your browser console:
Uncaught ReferenceError: func2 is not defined
Function declarations are only hoisted to the top of the script they're in, browsers don't load all scripts, do hoisting, and then run the step-by-step code.
So as of the
<script>
func2('CCC');
</script>
...there is no func2, and that fails. (Later, of course, func2 is added, and so func2('DDD') works and we see DDD.)
You mean skip the CCC not the DDD that totally logic since you're trying to call a function before it's definition func2, so if you check your console you could see the error message that describe this :
Uncaught ReferenceError: func2 is not defined
<!DOCTYPE html>
<html>
<head>
<script>
func1('AAA');
function func1(x) {alert(x);}
func1('BBB');
</script>
</head>
<body>
<script>
func2('CCC');
</script>
<script>
function func2(x) {alert(x);}
</script>
<script>
func2('DDD');
</script>
<script>
func3('EEE');
function func3(x) {alert(x);}
func3('FFF');
</script>
</body>
</html>
Instead if you put the definition of func2 in the same script with the call that will hoists the actual function definition and it'll work just fine as func1 did.
<!DOCTYPE html>
<html>
<head>
<script>
func1('AAA');
function func1(x) {alert(x);}
func1('BBB');
</script>
</head>
<body>
<script>
func2('CCC');
function func2(x) {alert(x);}
</script>
<script>
func2('DDD');
</script>
<script>
func3('EEE');
function func3(x) {alert(x);}
func3('FFF');
</script>
</body>
</html>
Hope this helps.
I do not understand why CCC run if the method is not declared over the line use. the correct declaration is this.
<!DOCTYPE html>
<html>
<head>
<script>
function func1(x) {alert(x);}
func1('AAA');
func1('BBB');
</script>
</head>
<body>
<script>
function func2(x) {alert(x);}
</script>
<script>
func2('CCC');
</script>
<script>
func2('DDD');
</script>
<script>
function func3(x) {alert(x);}
func3('EEE');
func3('FFF');
</script>
</body>
Sorry for my poor english.
For example suppose I have
function myTest() {
return "test";
}
defined in <head>
In body if I try to call myTest() it fails. How can I make functions and variables accessible from body?
Script in the head tag will get parsed first, so your variables and functions are accessible from script in the body tag. Your problem must be elsewhere, because the following example works:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function myTest() {
return "test";
}
</script>
</head>
<body>
<script type="text/javascript">
alert(myTest());
</script>
</body>
</html>
You need to place all JavaScript into <script>...</script> tags, OR, place it in event handling attributes (like onclick).
<html>
<head>
<script type="text/javascript">
function myTest() {
alert("hi");
}
</script>
</head>
<body>
<input type="button" onclick="myTest();" />
</body>
</html>
This is Your function in Head..
function myFunction(a)
{
return (a)
}
Then call like below
<script type="text/javascript">
myFunction(12);
</script>
Here's a part of the code that I have, why isn't the init function called? I am trying to use the javascript here http://www.openjs.com/scripts/ui/calendar/
<link href="http://www.openjs.com/scripts/ui/calendar/calendar.css" type="text/css" rel="stylesheet" /><script type="text/javascript">
<SCRIPT LANGUAGE="JavaScript" SRC="http://www.openjs.com/scripts/ui/calendar/calendar.js"></SCRIPT>
<script language="javascript">
function init() {
calendar.set("DOB");
}
</script>
<input name="DOB" id="DOB" value="Client's Date of Birth"/>
You're only defining the init function but not calling it.
Try to add a call to that function when the page loads:
<script type="text/javascript">
window.onload = function(){ init(); }
</script>
OR:
<body onload="init()">...
you need to register init(){..} to DOM ready event. They do it in
<script src="http://www.openjs.com/common.js" type="text/javascript"></script>
common.js
function siteInit() {
if(typeof window.init == "function") init();
On the example website, it has this near the closing tag:
<script src="http://www.openjs.com/js/jsl.js" type="text/javascript"></script>
<script src="http://www.openjs.com/common.js" type="text/javascript"></script>
Adding this to your page before the closing tag should launch the calendar.