JavaScript function can't be run in external file

Question

I have two functions in external file, then I call A and B in HEAD script, and A can be run and B can't, but if I put B into head script, B also can be run. I am not sure why, what can I do?

HTML:

<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function B(id) {
    var selected = document.getElementById(id)
    var arr = selected.options[selected.selectedIndex].text.split(" ");
    var value = ""
    for (var i = 1; i < arr.length; i++) {
        if (value != "") value = value + " ";
        value = value + arr[i];
    }
    return value;
}

function save() {
    A("msg");
    var x = B(id);
}
-->
...
<script type="text/JavaScript" src="js/my.js"></script>
</body>
...

my.js:

function A(msg) {
    scroll(0,0);
    var outerPane = document.getElementById('FreezePane');
    var innerPane = document.getElementById('InnerFreezePane');
    if (outerPane) outerPane.className = 'FreezePaneOn';
    if (innerPane) innerPane.innerHTML = msg;
}

function B(id) {
    var selected = document.getElementById(id)
    var arr = selected.options[selected.selectedIndex].text.split(" ");
    var value = ""
    for (var i = 1; i < arr.length; i++) {
        if (value != "") value = value + " ";
        value = value + arr[i];
    }
    return value;
}

Don't use the deprecated language attribute, try to avoid using type attribute when possible (just use <script>...</script>) and definitely do not put HTML comments (the ) inside a <script> tag, as that will either cause a JavaScript syntax error, or treat it as a comment and prevent it from loading. — Patrick Roberts
– Patrick Roberts, Commented Jun 9, 2017 at 2:20
There are such tags, I hide them for less code here. I also removed , but same result. — mikezang
– mikezang, Commented Jun 9, 2017 at 2:37

Charlie Martin · Accepted Answer · 2017-06-09 02:39:08Z

2

The safest thing to do is wrap the code in the head in a window.onload handler like this...

<head>
  <script type="text/javascript">
    window.onload = function(){
      // your external files are guaranteed to be loaded now
      // you can call A or B
    }
  </script>
</head>

onload is only fired after all external scripts have been loaded.

Here is a full example...

index.html

<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
<script>
function save() {
  A()
  B()
}

window.onload = function() {
  save()
}
</script>
</head>

<body>
The content of the document......
<script src="./external.js"></script>
</body>

</html>

external.js

function A() {
  alert('A ran')
}

function B() {
  alert('B ran')
}

NOTE: This is better than moving the external script to the head, like the other answers suggest, because external resources loaded in the head block the entire page render until they are loaded.

By leaving the external script at the end of the body tag, the page load will seem faster as the css/html will display immediately. Even if the javascript isn't loaded yet.

edited Jun 9, 2017 at 2:39

answered Jun 9, 2017 at 2:12

Charlie Martin

8,4463 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

mikezang Over a year ago

do you mean 'window.onload = save() {A("msg"); var x = B(id);}'?

Charlie Martin Over a year ago

another option is to leave save as is and just call it inside window.onload = function () { save(); }

mikezang Over a year ago

are you sure? function not be run, can you show me more detail?

mikezang Over a year ago

window.onload = function () { save(); } has the same result with my code.

Charlie Martin Over a year ago

Check your javascript console. I bet you have an error. Most likely, id is not defined. Because the execution stops on the error, B is not executed

|

Tran Ho · Accepted Answer · 2017-06-09 02:11:25Z

0

Add your external file before the script tag contains your "save" function.

<script language="JavaScript" src = "yourfile.js" type="text/JavaScript">
</script>
<script language="JavaScript" type="text/JavaScript">
   function save(){
           A();
           B();
   }
</script>

answered Jun 9, 2017 at 2:11

Tran Ho

1,50010 silver badges16 bronze badges

1 Comment

mikezang Over a year ago

you know function A is at the same place with B, but A is no problem to be run. then even if I put file before save, same result.

Collectives™ on Stack Overflow

JavaScript function can't be run in external file

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related