I want to load a function named james() from a Javascript file named hello.js which is added as an external file to index.html.
My problem is when the function james is declared inside $(document).ready(function()), it just says that 'james function is undefined' and is not called. How can I call function declared inside document.ready using onload?
<html>
<head>
</head>
<body onload= "james()">
<script src=hello.js>
</body>
</html>
hello.js javascript file
function mountApp{
$(document).ready(function(){
function james(){
alert("how can i get call ,when html page is loaded");
}
});
}
true method is, you create function outside document.ready function and then call
function james()
{
alert("how can i get call ,when html page is loaded");
}
$(document).ready(function(){
james();
)};
Your "james" function does not exist in the correct scope. It is declared inside the "ready" event listener and only exists inside the listener scope. After that, it won't be available anymore.
You cannot do what you are trying to do. Functions cannot be used outside of the scope they were declared in.
Move the function to the global scope instead.
function mountApp{
$(document).ready(function(){
// You can call the function from here
james();
});
}
function james(){
alert("how can i get call ,when html page is loaded");
}
Now, I don't see why you would be adding an event listener "onready" inside a function, because function calls will only be executed after the DOM is ready, so it will never trigger.
Related
I want to call another function before body, but how?
The system shows me the error undefined function myx
I only can add code after body.
<script type="text/javascript">
jQuery(function($){
function myx() {
alert("omg");
};
});
</script>
</head>
<body>
<script>
jQuery(document).ready(function($){
$("mytest").click(function(){
myx();
});
});
</script>
Check
That function is out of scope. You need to define the function outside the jQuery callback.
<script type="text/javascript">
function myx() {
alert("omg");
};
</script>
</head>
<body>
<script>
jQuery(document).ready(function(){
$("#mytest").click(function(){
myx();
});
});
</script>
Check
Use external JavaScript, so it's cached into the Browser Memory, so when your Client visits again it will load faster. Then look at this:
// wrapper is same as $(document).ready() with no-conflict
jQuery(function($){
// should be defined once everything has loaded
function myx(){
// never use alert except to test
alert('OMG!');
}
// passing a function name like a var is the same as Anonymous function
$('#mytest').click(myx);
});
// Ignoring outer wrapper to save indenting - indent everything further
The important thing is that myx should be defined after everything has loaded.
You don't have to, but it's a best practice to use external JavaScript and put the <script> tags in the <head>, setting both <script type='text/javascript' src='yourUrl.js'></script> to be W3C Compliant. Additionally, technologically the document.body may not be available to some older Browsers if your <script> tags are defined in the <body>, as HTML must be defined before JavaScript is able to get it, which is why you use the Anonymous function inside of jQuery() (same as $(document).ready() or the JavaScript onload Event). Then you get the HTML with JavaScript because those Elements are available onload.
Here is the Bin. I am trying to make an example of reloading the page by using location.reload() in the function refresh() and using onclick='refresh()' in a button. For some reason the page is not reloading.
The JS function:
function refresh() {
location.reload();
}
The HTML button:
<button onclick='refresh()'>Try Refreshing!</button>
Your refresh method is not in the global scope - it's enclosed within your document.ready.
Move it out from document.ready into it's own script tag.
<script>
function refresh() {
location.reload();
}
</script>
The edited bin
The refresh() function isn't in the global scope. In order to make the function globally accessible, you can do this:
window.refresh = function() {
location.reload();
};
Your function is defined inside the
$(document).ready(function () {
...
});
body, so the scope of the function name is just that body. As a result, you can't reference it from inline onXXX attributes.
Either associate it with the element using
$("#buttonid").click(refresh);
or define the function outside the document ready function.
you can do directly as
<button onclick="window.location.reload()">Try refreshing!</button>
here is the problem..
i have a javascript file which is named javascript.js like this
$(document).ready(function(){
function init()
{
//code goes here
}
}
now the index.html file has a command button which should call the init() function.
<html>
<head><script src=javascript.js ....></script>
<body><button type="button" onclick="init()">Call Init!</button></body>
</html>
But it doesn't call it. Nothing happens as expected. Please suggest a solution.
You should define your function outside $(document).ready() scope.
The onclick attribute will be executed in a global context. Your init function is scoped to the anonymous function which you pass to jQuery. Three solutions:
Move the init function outside of the ready function, into the global scope
export the init function by making it a property of the global object: window.init = function() {…};
as you use jQuery, you should not need to define any handlers in attributes. Instead use (inside the ready function): $("button").click(function init() {…}); Even better use an id to reference the button.
Try viewing the page in chrome. Hit F12 to view the console. You'll be able to quickly debug the issue. At first glance, however, I do see that your $(document).ready function is not closed properly. Add ');' at the end of the code you included. Also, add quotes around javascript.js in your script tag. See if that helps.
Why don't you use
function init()
{
$(document).ready(function() {
//code goes here
});
}
You can use flag too in order to keep track if the "//code goes here" proceeded or not. So in case of document not ready yet, you can use while loop with setTimeOut function for some pause interval "In order to not hang the client browser".
This is the function
function seeHTML(elem){
var htmlTxt=document.getElementsByTagName('html')[0].innerHTML.toString();
elem.value=htmlTxt;
}
to call i use HTML
<input type="button" value="See HTML" onclick="seeHTML(txt)">
how to call it from another function as document.write
document.write(seeHTML(txt));
-- im a javascript begginer
however i tried document.write but it prints the function data itself, it doesnt use the function, how to ask it to use it then print the return (result)
function foo(element) {
seeHTML(element);
}
function seeHTML(element) {
}
foo(document.getElementsById('element'));
in JavaScript code:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", call_your_function_here);
</script>
Here we created an event listener it means when the document is fully loaded the function() will be called, using the same way you can add any event listener to any DOM object, ex. you have a button with id="test", var btest = document.getElementById('test'); then
btest.addEventListener('click', function() { //execute code if btest object was clicked });
Bottom line you should call your function when the document is fully loaded hence replace the call_your_function_here() with your function name and if you wanted to reference the same button your function was embedded in use this syntax to reference the button DOM object:
var buttonObj = document.getElementById(buttonID);
then supply buttonObj to your function's argument.
It is always good to separate presentation layer and behaviour between HTML and Javascript based on head first book.
They tell me not to do:
<textarea onclick="showAlert()"></textarea>
But instead, do below:
The example below separate the behaviour from HTML code (structure).
<html>
<head>
<script type="text/javascript">
window.onload = init;
function init() {
$('txt_area').onclick = showAlert;
}
function showAlert(say) {
alert(say);
}
</script>
</head>
<body>
<textarea id="txt_area"></textarea>
</body>
</html>
This allows HTML (structure) to look clean and "behaviour" part is initialized in init() function when page loads. I understand that so far.
But then I wonder how am I supposed to pass an argument to showAlert() function???
Below does not work, it will call the showAlert() as soon as the page loads and this is not what I want to because it needs to be fired onclick.
function init() {
$('txt_area').onclick = showAlert("hello");
}
Is it possible to pass arguments to showAlert() function but still separate the behaviour and structure?
UPDATE
Forgot to mention.. I'm using prototype.
Wrap your code in a function.
$('txt_area').onclick = function() {
showAlert("hello");
};