External javascript file working but not calling functions

Question

My index.html file:

<!DOCTYPE html>
<html>

<head>
    <meta charset = "utf-8" />
    <title> My Title </title>
    <link rel = "stylesheet" href = "main.css">
</head>

<body>
    <script type = "text/javascript" src= "myScript.js"> </script>
    <script>
        myFunction();
    </script>
</body>

</html>

myScript.js file:

<!--

function myFunction(){
    alert("external file worked");
}

// -->

When I run this - no alert pops up. But if I change myScript.js to this:

<!--
    alert("external file worked");
// -->

It alerts just fine. So my problem is in the function call, but I cannot see anything wrong with it. Anyone with sharper eyes than me can help?

You don't have a function named `myFunction`. Change `myFunction` to `class`, or change `class` to `myFunction`. — Rick Hitchcock, Sep 23 '14 at 22:20
Sorry Rick that was an editing error when I pasted it for questioning here - it's fixed now. Those two match in the original file. — zZShort_CircuitZz, Sep 23 '14 at 22:23
There's a big difference between using a reserved word "class" and "myFunction"; the former gives an error. — Ja͢ck, Sep 23 '14 at 22:25
The code now works as-is for me, even with the HTML comments. Are both files in the same folder? — Rick Hitchcock, Sep 23 '14 at 22:26
Are you really doing `alert("external file worked")` in `myFunction()` or is that just a crude example? — StackSlave, Sep 23 '14 at 22:28
Rick - yes they are in the same file. PHPglue - I'm just trying to get some verification that the html and javascript files are communicating. — zZShort_CircuitZz, Sep 23 '14 at 22:29
@PHPglue, I thought the same thing you did re HTML comments, but I tried it as-is, and the HTML comment tags were ignored in Chrome and Internet Explorer. — Rick Hitchcock, Sep 23 '14 at 22:31
Even your `onload` Event can be put in the External JavaScript file. Just put the ` — StackSlave, Sep 23 '14 at 22:46

score 1 · Answer 1 · answered Sep 23 '14 at 22:31

Your original code (you've edited it later) was this:

function class()
{
    alert("external file worked");
}

Doing this causes an error:

SyntaxError: Cannot use the reserved word 'class' as a function name.

If you change the function name to something that's not a reserved word it will work as expected.

score 0 · Accepted Answer · answered Sep 23 '14 at 22:28

0

At some point the myScript.js file loads after the myFunction() is called. Move the loader to the header or use the $(document).ready();

answered Sep 23 '14 at 22:28

Jorge Vivas

121
3

That makes no sense at all; the code as given in the latest revision should work as expected. – Ja͢ck Sep 23 '14 at 22:35
I'm glad this fixed the problem, but I don't understand why it would. See http://stackoverflow.com/questions/8996852/load-and-execute-order-of-scripts: "Inline scripts that come after external scripts have are held until all external scripts that came before them have loaded and run." – Rick Hitchcock Sep 23 '14 at 22:36

External javascript file working but not calling functions

2 Answers2