Unable to call function from external JavaScript

Question

I have a simple HTML page which calls a JavaScript function:

<!DOCTYPE html>
<html>
    <script type="text/javascript" src="css/myscript.js"></script>
    <head>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body onload="javascript:hello()">
    </body>
</html>

This is my hello() function:

<script>
function hello() {
    alert("load new content");
    document.open();
    document.write("<h1>Changed content!</h1>");
    document.close();
}
</script>

When pasting the JavaScript block into the page directly, it works. However it's not able to find hello() if the JavaScript is contained within a dedicated file.

Using the Developer tools I can see that the JavaScript file is loaded successfully.

Your <script> isn't allowed directly in the <html> tag. It needs to be in either the <head> or the <body>. — Ivar
– Ivar, Commented Apr 22, 2018 at 18:13

TGr · Accepted Answer · 2018-04-22 17:50:26Z

1

If you have those script tags in your js file, get rid of them.

answered Apr 22, 2018 at 17:50

TGr

363 bronze badges

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

1 Comment

Carla Over a year ago

Thanks a lot. All answers were correct. I will mark it as correct as this was the first reply.

ibrahim tanyalcin · Accepted Answer · 2018-04-22 17:56:17Z

1

2 issues, during parsing of your script, document is already open. If you open again, everything will be deleted so get rid of it(write is already a call to open). Second, make sure you do not add the script after the load event, so that function hello is really defined. Here I am adding it right within body (or you can use defer if you want.) Here is the fiddle

<head>
  <link rel="stylesheet" href="css/style.css">

</head>
<body onload="hello();">
</body>



 function hello() {
      alert("load new content");
      //document.open();
      document.write("<h1>Changed content!</h1>");
      document.close();
    }

answered Apr 22, 2018 at 17:56

ibrahim tanyalcin

6,5634 gold badges21 silver badges27 bronze badges

Comments

Jake Reece · Accepted Answer · 2018-04-22 17:57:54Z

1

The contents of myscript.js should just be:

function hello() {
  alert("load new content");
  document.open();
  document.write("<h1>Changed content!</h1>");
  document.close();
}

You would include the <script> tag only if your JavaScript were inside your HTML file; the <script> is what tells the browser, "Hey, we're not interpreting HTML anymore. This is JavaScript."

Also, as Colin pointed out in the comments, myscript.js probably doesn't belong in your css folder. A common name for the folder that contains all your website's JavaScript files is js.

answered Apr 22, 2018 at 17:57

Jake Reece

1,1781 gold badge14 silver badges26 bronze badges

Collectives™ on Stack Overflow

Unable to call function from external JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related