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.
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 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>
I use mvc5. Do not include jQuery in test.
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title></title>
</head>
<body>
#RenderBody()
</body>
</html>
Test.cshtml:
<script type="javascript/text">
function myFunction() {
alert("its is working");
}
</script>
<button onclick="myFunction()">Click me</button>
In result I have an error: ReferenceError: myFunction is not defined
and the result code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title></title>
</head>
<body>
<button onclick="myFunction();">Click me</button>
<script type='text/javascript' >
(function($){
function myFunction() {
alert("I am working");
};
})(jQuery);
</script>
</body>
</html>
I have read a lot about this error and have not founded the answer. Could you clarify, who wrap JavaScript code? Is there any flag to cancel it? Is there any other way to resolve the problem?
Something (probably MVC5) is wrapped your code for you, but with good reason. Putting onclick handlers on elements pointing at a globally declared function is how JS was written in the '90s.
To resolve it, put an id attribute on your button and remove the inline event handler:
<button id="mybutton">
and then use jQuery to register the event handler:
$('#mybutton').on('click', function () {
alert("I am working");
});
or, since you mentioned in later comments that you have a loop generating these elements, use a class and a data- attribute instead:
<button class="myclass" data-id="...">
with code:
$('.myclass').on('click', function() {
var id = $(this).data('id');
...
});
<script>
function myFunction() {
alert("its is working");
}
</script>
<button onclick="myFunction()">Click me</button>
This will work. cheers
I want to call an onload event before an focus event in a HTML page.
In my following code
<!DOCTYPE html>
<html>
<head>
<body onload='onloading()'>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).focus(function(){
callMe();
});
});
function callMe()
{
alert('Focus is on current page');
}
function onloading()
{
alert('Onload function call ');
}
function myFunction()
{
document.write("some text");
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</head>
<p id="demo"></p>
</body>
</html>
When I execute this code then i get an a pop up as "Focus on current page " and in the back ground " some text" . But I expect to get an output in the following order
"some text"" in the back ground
"Onload function call" popup
"Focus is on current page" pop up .
But I am not getting the pop up "Onload function call" :( . I need to run the onload event in the body before the focus event. IS it possible to do such a thing ?
Try this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<p id="focus">Click here</p>
<script type="text/javascript">
function callMe()
{
$("#focus").html('Focus is on current page');
}
function onloading()
{
alert('Onload function call ');
}
function myFunction()
{
$("#demo").html("some text");
}
$(window).load(function () {
onloading();
});
$(document).ready(function(){
$("#demo").html= myFunction();
$(window).focus(function(){
callMe();
});
});
</script>
</body>
</html>
Your HTML is invalid. You have put the head tag inside the body which is not allowed.
Make use of the following structure:
<html>
<head>
<script></script>
</head>
<body>
</body>
</html>
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>