executing javascript function from HTML without event

Question

I wish to call a javascript function from an HTML page and I do not want it dependent on any event. The function is in a separate .js file since I wish to use it from many web pages. I am also passing variables to it. I've tried this:

HTML:

<script type="text/javascript" src="fp_footer2.js">
footerFunction(1_basic_web_page_with_links, 1bwpwl.html);
</script>

The function in fp_footer2.js:

function footerFunction(path, file) {

document.write("<a href=" + path + "/" + file + " target='_blank'>Link to the original web page for this assignment.</a>");

return;
}

(I have also tried putting the fp_footer2.js file reference in the header, to no avail. I'm not sure if I can put it 'inline' like I did in this example. If not, please let me know.

PS: I know I can do this with a simple 'a href=""' in the HTML itself. I wanted to see if this could work, for my own curiosity.

look at the errors in your console, set-up a fiddle, and remember that `document.write` will overwrite the DOM, and take the scripts you loaded with it — Elias Van Ootegem, Nov 05 '12 at 17:27
You need quotes around the parameters you are passing into the function, but yes, you can execute arbitrary javascript without tying to an event just as you have done. — Mike Brant, Nov 05 '12 at 17:27
I'm confused, if you don't want it fired with an event, when exactly do you want it fired? — Matt, Nov 05 '12 at 17:28
If a script block has a `src` defined, anything within the block will be ignored. — Shmiddty, Nov 05 '12 at 17:29

score 7 · Answer 1 · answered Nov 05 '12 at 17:29

7

If a <script> has a src, then the external script replaces the inline script.

You need to use two script elements.

The strings you pass to the function also need to be actual strings and not undefined variables (or properties of undefined variables). String literals must be quoted.

<script src="fp_footer2.js"></script>
<script>
    footerFunction("1_basic_web_page_with_links", "1bwpwl.html");
</script>

answered Nov 05 '12 at 17:29

Quentin

800,325
104
1,079
1,205

Thanks for that snippet, that worked fine! So I made two mistakes: not having quotes around the strings and trying to use a single script element. – user1800823 Nov 05 '12 at 21:01

Halcyon · Answer 2 · 2012-11-05T17:34:15.993

0

JavaScript will run while your page is being rendered. A common mistake is to execute a script that tries to access an element further down the page. This fails because the element isn't there when the script runs.

So includes in the <head> will run before any DOM content is available.

If your scripts are dependent on the existence of DOM elements (like a footer!) try to put the script includes after the DOM element. A better solution is to use the document ready event ($(document).ready() in jQuery). Or window.onload.

The difference between documen ready and window onload is that document ready will fire when the DOM has been rendered; so all initial DOM elements will be available. Where as window onload fires after all resources have loaded, like images. window onload is useful if you're doing things with those images. Usually document ready is the right one.

edited Nov 05 '12 at 17:34

answered Nov 05 '12 at 17:28

Halcyon

54,624
10
83
122

All the code is in the question. None of it tries to access an element that isn't available yet. It also uses `document.write` which has to run *before* the document is ready! – Quentin Nov 05 '12 at 17:31
Where? (And you still can't `document.write` after `document.close` has been trigged by the DOM parsing finishing: http://jsfiddle.net/cZZTg/ ) – Quentin Nov 05 '12 at 17:36
Then I would argue not to use `document.write`. http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – Halcyon Nov 05 '12 at 17:46

Joshua Dwire · Answer 3 · 2012-11-05T17:36:09.063

0

Maybe I misunderstand your question, but you should be able to do something like this:

<script type="text/javascript" src="fp_footer2.js"></script>
<script type="text/javascript">
   footerFunction(1_basic_web_page_with_links, 1bwpwl.html);
</script>

edited Nov 05 '12 at 17:36

answered Nov 05 '12 at 17:29

Joshua Dwire

5,272
4
28
49

@Quentin Ah, just noticed that the same `script` tag had a reference to an external file and some inline script. See my updated answer. – Joshua Dwire Nov 05 '12 at 17:37

score -1 · Answer 4 · answered Nov 05 '12 at 17:29

-1

Have you tried calling it from a document.ready?

<script type="text/javascript">
  $(document).ready(function() {
    footerFunction(1_basic_web_page_with_links, 1bwpwl.html);
  });
</script>

answered Nov 05 '12 at 17:29

xian713

1
2

That `$` function is undefined. If jQuery was loaded, then this would attempt to document.write after the DOM was ready … which is not something you should try to do. (because it is too late: http://jsfiddle.net/cZZTg/ ) – Quentin Nov 05 '12 at 17:31

executing javascript function from HTML without event

4 Answers4