How to call function without onload
Question
I was trying to figure out a way to dynamically write to a table in the body from the head and came across this sample code. The problem is that it calls the function using 'onload'. I need to call the function from a loop in my code to write to the table.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.mytable {
border:1px solid #000000;
border-collapse:collapse;
width:200px;
}
.mytable td{
background:#cccccc;
border:1px solid #000000;
}
</style>
<script type="text/javascript">
onload=function(){
var nrCols=2;
var maxRows=4;
var nrRows=maxRows+1;
while(nrRows>maxRows){
nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
}
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
for(var i=0;i<nrRows;i++){
row=document.createElement('tr');
for(var j=0;j<nrCols;j++){
cell=document.createElement('td');
cell.appendChild(document.createTextNode(i+' '+j))
row.appendChild(cell);
}
tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
I tried to name the function and get rid of the onload and call the function from the script in the head but that doesn't work.
4 answers
solution1
2 ACCPTED 2013-08-29 20:27:44
you have to put the script after the div in the html to use function foobar() and afterward write foobar();
this is for calling a function, however onload=function() can also works in the <head> tag. the reason is if its a function the page renders in order and the <div> will not exist at the point the page reaches it if its in the head, however onload means after the page has finished loading.
solution2
1 2013-08-29 20:35:11
It's not that difficult. But first you must segregate the js and mark up.
Segregation allows you better code management . Try this :
HTML:
<div id="mydiv"></div>
<button id="btn">Click</button>
JS:
writeToTable();
function writeToTable(){
var nrCols=2;
var maxRows=4;
var nrRows=maxRows+1;
while(nrRows>maxRows){
nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
}
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
for(var i=0;i<nrRows;i++){
row=document.createElement('tr');
for(var j=0;j<nrCols;j++){
cell=document.createElement('td');
cell.appendChild(document.createTextNode(i+' '+j))
row.appendChild(cell);
}
tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}
Find the working solution here : http://jsfiddle.net/tx5Xd/
solution3
0 2013-08-29 20:34:48
不确定我是否完全理解问题，但是在标头中定义函数，然后在html文件末尾调用函数。
solution4
0 2013-08-29 23:46:31
My preferred way of handling situations like this is to a) still use onload , because it's a great way for the browser to inform you that the content has finished loading; but b) go ahead and factor your code into its own function, but then just call that function from your onload handler. For example:
function myFunction(param1, param2) {
// do your important stuff here
}
window.addEventListener('load', function(){
myFunction('foo', 'bar');
}, false);
That way, your function still won't get called until after the page finishes loading, but you can also call it separately later if you like.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.