Calling a function when page loads

Question

This is the code which I have written. The default function should be called when the page loads, without clicking any button. It should display some data and then two buttons should be displayed. What modifications do I need in that code?
I am a beginner so I may have missed many things please help.

This is my JavaScript part, detailed program is given in the link.

function default(){
var i=7;
j=15;
document.write(i+j);
}

*When or under which circumstances* should your `default` function be called? When the page has loaded? After a certain amount of time? Or when some other event occurs? — stakx - no longer contributing, May 20 '12 at 17:44

Sampson · Accepted Answer · 2012-05-20T17:54:09.580

7

Avoid using Keywords

You cannot use the keyword default:

Uncaught SyntaxError: Unexpected token default

You'll need to rename your function.

Immediately Invoked Function Expressions

Once you've done that, you can wrap it in parenthesis to execute it immediately:

(function dflt(){
  var i = 7, j = 15;
  document.write( i + j );
})();

Warning: Avoid `document.write`

Note that document.write will clear out your document, thus removing the contents of your document. You should instead insert a new text node, or update the contents of an element on the page:

(function dflt(){
  var i = 7, j = 15;
  document.body.appendChild( document.createTextNode( i + j ) );
})();

You could also add this text node to an element on the page:

var tNode = document.createTextNode( i + j );
document.getElementById("foo").appendChild( tNode );

This would add the resulting text to any element whose id attribute is foo:

<span id="foo"></span>

edited May 20 '12 at 17:54

answered May 20 '12 at 17:45

Sampson

265,109
74
539
565

When I was writing the code I didn't get any error message rather I got a blank message. May be you can help me telling what should I do for getting error messages rather than getting a blank page? – NewUser May 21 '12 at 04:23
http://jsfiddle.net/dibyaranjan3177/YLv8G/ What is the problem with this page? When the function test is called the page shows loading icon but there are no item to load! – NewUser May 21 '12 at 04:35
@Dibya Why are you using `document.write`? I encouraged you to *avoid* that in my answer above. It will only cause you unnecessary frustration. – Sampson May 21 '12 at 04:46

score 4 · Answer 2 · edited May 23 '17 at 11:49

4

You can use Immediately Invoked Function Expression:

(function defaults() { // I edited the function name - "default" can not be used
    var i = 7;         // You can also remove the function name, will work either
    j = 15;            // way. "default" is a reserved word
    document.write(i + j);
})();

But it's calling it... you can't run a function without calling it, do you want to execute it with magic?

You should read this:

What does this "(function(){});", a function inside brackets, mean in javascript?

As @stakx pointed out, you can pass a function reference to functions the execute the function after X time, like setTimeout:

setTimeout(defaults, 1000); // execute "defaults" after one second.

But it's just like handle it yourself:

function foo(aFunction){
    aFunction();
}

foo(defaults);

edited May 23 '17 at 11:49

Community

1
1

answered May 20 '12 at 17:44

gdoron

147,333
58
291
367

1

*"you can't run a function without calling it"* -- agreed, except in scenarios where timers or events are involved. – stakx - no longer contributing May 20 '12 at 17:46
http://jsfiddle.net/dibyaranjan3177/3pNWe/1/ I have edited it. The problem is it is not showing the buttons. – NewUser May 20 '12 at 17:47
Yep! The self invoking anonymous function :) – Katti May 20 '12 at 17:47
You can remove the name of the function `defaults` as well. – Kevin Ji May 20 '12 at 17:47
@stakx in scenarios with events or timers , functions are callbacks so there are indeed ran by them. the statement : " you can't run a function without calling it," still stands in my opinion. – mpm May 20 '12 at 17:48
1

+1 For pointing the name of this thing: "Immediately Invoked Function Expression" – jperelli May 20 '12 at 17:49
@Dibya. See the update, you must call it or pass the reference to a function what will do it for you. – gdoron May 20 '12 at 17:56

score 2 · Answer 3 · answered May 20 '12 at 17:55

2

If you're not going to use jQuery (as suggested by @Photon Critical Fatal Error), you could give the body element's onload event a try:

<body onload="default();">
    ...
</body>

Though this might not work as expected. jQuery handles this in a more reliable way, so if you decide to give it a try, look at the $(document).ready(…) API function.

answered May 20 '12 at 17:55

stakx - no longer contributing

83,039
20
168
268

I think he/she don't know the reliability and flexibility of jquery. – Trikaldarshiii May 20 '12 at 18:03
@Photon, agreed, but so what? It's only a suggestion. If the OP doesn't want to use it, there's still the `onload` event. – stakx - no longer contributing May 20 '12 at 18:10
but they don't want to call too? – Trikaldarshiii May 20 '12 at 18:13

score 1 · Answer 4 · answered May 20 '12 at 17:46

1

function default(){
    var i=7;
    j=15;
    document.write(i+j);
    }

default is a reserved word in javascript you cant use it.

answered May 20 '12 at 17:46

mpm

20,148
7
50
55

Calling a function when page loads

4 Answers4

Avoid using Keywords

Immediately Invoked Function Expressions

Warning: Avoid document.write

Warning: Avoid `document.write`