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>
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>
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.
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 am using window.opener.functionName() in IE to call the parent function from a child window, which is working perfectly fine. However, the same is not working in Chrome/Firefox.
I tried window.top.functionName(); parent.window.top.functionName() and numerous others. None are working.
Can anybody help!
EDIT
Here is the code.
Note that I have 2 level hierarchy. I need to call the updateHTML() function of Parent.jsp from ChildCall2.jsp file
Parent.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Parent function call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML()
{
alert("Parent called successfully");
}
</script>
</head>
<body onFocus="">
Click Me
</body>
</html>
ChildCall.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Child function call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML1()
{
alert("Parent call function");
window.opener.updateHTML();
}
</script>
</head>
<body onFocus="">
Click Me
</body>
</html>
ChildCall2.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Child function2 call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML2()
{
alert("Parent call function2");
window.opener.updateHTML1();
}
</script>
</head>
<body onFocus="">
Click Me to call parent function
</body>
</html>
All your pop-ups have the same name (window.open(url, 'Hints', ...)), this might confuse some browsers so they recognize some other window being their opener.
Just a sidenote, detecting if a window has blur method is unnecessary, just do Hints.focus().