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.
Related
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.
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".
Please look at this code:
<script>
var mygrid;
function lock(){
for (var i=1; i<15; i++)
{
var cur_row=i + "";
mygrid.lockRow(cur_row,true);
mygrid.setRowColor(i,"#E5E5E5");
}
}
function doInitGrid(){
mygrid = new SomeClass;
}
</script>
</head>
<body onload="doInitGrid()" dir=rtl>
<div id="mygrid_container" style="width:905px;height:550px;"></div>
<script>lock();</script>
<button onclick="addRow()">Add Row</button>
<button onclick="removeRow()">Remove Row</button>
<button onclick="lock()">lock Row</button>
</body>
Why when I run lock function (Without the button), my var is undefined, and when I click on the button everything is ok?
This is a timing issue, not a scope issue.
You call doInitGrid() only onload so it won't assign a value to mygrid until after the document has finished loading.
When you call lock() inline, you do so as the document loads.
Presumably you have waited until the document has finished loading before clicking on the button.
If by "my var is undefined" you mean that the variable mygrid is undefined, that's because you initialise it inside the function doInitGrid() which is not called until onload of the page. The onload event happens after the whole page has finished loading. Other inline script runs when the browser encounters it as it parses the document.
I am not sure when you have called the lock function without clicking button. But it appears that that the doInitGrid function was not executed when you have executed the lock function. The below code may work
function lock(){
if(!mygrid){
doInitGrid();
}
for (var i=1; i<15; i++)
{
var cur_row=i + "";
mygrid.lockRow(cur_row,true);
mygrid.setRowColor(i,"#E5E5E5");
}
}
You are calling load() before the document gets loaded completely. So your variable is not assigned as doInitgrid is not yet called.(it gets called only after document is fully loaded)
You are instantiating mygrid inside the function doInitGrid() which is called only on onload. But your script statement <script>lock();</script> executes before the page is loaded as it is part of the page HTML. When this script block executes, the value of mygrid is undefined which is the default value set by JS for all variables declared without an initial value.
If you want to call lock() when the page loads up, call it on onload after the call to doInitGrid() like this:
<body onload="doInitGrid(); lock();" dir=rtl>
Quentin has answered your question, But I'd like to add that it would be better to clean up your code a bit. Something like this.
<script>
function lock(mygrid){ //pass in the grid var
for (var i=1; i<15; i++)
{
var cur_row=i + "";
mygrid.lockRow(cur_row,true);
mygrid.setRowColor(i,"#E5E5E5");
}
}
function getInitGrid(){
//some initialization code here maybe. Otherwise just take this out
return new SomeClass;//return an instance
}
var mygrid = getInitGrid();
//and then pass in the mygrid variable wherever you call lock
lock(mygrid);
</script>
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");
};