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>
Related
I tried to remove my current button that creates JSON table but after I removed button I could not get my table to load. Here is my code:
<body>
<button type='button' id="build" onclick="getTable()">Build Table</button>
</body>
and here is my function:
function getTable(){
var one= [];
var k1 = [];
var k2 = [];
myTbl="<table id='tbl1'><tbody><th>Selection Box</th><tr>"
for(key in myJSON){
}
}
How I can get my page to load without using button/function?
I tried to remove button and function and just reload the page but that did not work. If anyone can help please let me know.
You can use onload() on body tag.
<body onload="getTable()">
use jquery for that, then just use document ready, like this, this will wait untill the document is loaded and then execute the function.
$( document ).ready(function() {
getTable();
});
It's because you need to call your function. When you using button, you have onclick event, which call your function every time you are clicking on it. The easiest way is to do it like this:
<body>
<script>
getTable();
</script>
</body>
I have some HTML structured as follows
<script>
function x()
{
alert('works');
}
</script>
<table>
(...)
</table>
<script>
console.log('autoexec');
</script>
I am loading this HTML from a file in a DIV's innerHTML through an XMLHttpRequest.
Upon completion of the request, this is what I do
div.innerHTML = request.responseText;
var scripts = div.getElementsByTagName("script");
for(var i=0;i<scripts.length;i++) eval(scripts[i].text);
The bottom script, containing code outside a function, gets executed.
However the function x() in the top script isn't evaluated and remains unavailable.
What am I missing?
Thanks
Solved. Instead of eval(scripts[i].text) I now use document.head.appendChild(scripts[i]). This both correctly executes the code outside the function AND makes the function available for calling.
I am feeling quite stupid about this, but I have a named function within my main Dojo require script that my intention was to run when called by a click event. However, the function runs on loading the page and does not run on the click event.
<script>
require(["esri/map", "dojo/domReady!"], function(Map){
var map = new Map("map");
testNode = document.getElementById("testNode");
testNode.onclick = test();
function test() {
alert("test");
}
}
</script>
<body>
<div id="testNode">Click Here To Test</div>
<div id="map></div>
</body>
As soon as the page loads the "test" alert pops up and nothing happens on the click event.
When you type
testNode.onclick = test();
You're calling the function test and passing the return value of the function to testNode.onclick. You should instead assign a reference of the function test to testNode.onclick:
testNode.onclick = test;
This might be a very basic question but I'm trying to understand this behavior
This is my javascript code. I want to know why second call to foo does not work. Here is the JSFiddle link
$.fn.foo = function(somestring){
var $this = this;
$this.html(somestring);
}
$(function(){
$('#container').foo("within function"); //this works
});
$('#container').foo("outside"); //this does not
The DOM is not fully loaded .. Thats the reason it won't work..
So when you encase your code inside the DOM Ready handler it waits for the document to be loaded and then runs the code inside.
This makes sure the element is available before any code is run on it..
When the HTML document is parsed , it parses top down.
So if the script is included in the head section , then the scripts are loaded first and then the HTML structure.. When you try to the run the code , it obviously won't work cause the element was still not parsed..
So encasing that in the handler will make sure the element is available before calling the methods on them..
This is because $('#container').foo("outside"); is evaluated before the body is processed. $('#container') will return with a length of 0. This is demonstrated below.
$.fn.foo = function(somestring){
var $this = this;
$this.html(somestring);
}
$(function(){
$('#container').foo("within function");
});
var element = $('#container');
console.log(element.length); //prints 0
element.foo("outside");
If the script is at the beginning of the page the rest of the HTML document has not been parsed yet, so the document looks empty to the script, so there is no #container yet.
$(function() { ... });
is (roughly) equivalent to
Wait till the whole HTML file is loaded and ready
Then execute function
so #container will be there and it will work. Another way to make it work would be to put the script below the rest of the page or at least below #container.
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.