How do I run an external javascript function in a web page?

Question

I can run Javascript in-page, thus:

Javascript.html:

<html>
    <body>
        Hello <span id="mySpan"> World! </span>
    </body>
    <script>
        function worldInSpanish() {
            return "Mundo!";
        }
        document.getElementById('mySpan').innerHTML = worldInSpanish();
    </script>
</html>

Hello Mundo!

But when I try to run it from an external file, it doesn't work.

javascript.js:

function worldInSpanish() {
    return "Mundo!";
}

External_javascript.html:

<html>
    <body>
        Hello <span id="mySpan"> World! </span>
    </body>
    <script src="javascript.js">
        document.getElementById('mySpan').innerHTML = worldInSpanish();
    </script>
</html>

Doesn't change the text:

Hello World!

What am I doing wrong? I'm guessing that I need to do something more to "import" the function into the HTML page or "export" it from the Javascript file.

JavaScript within a <script> element which has a src attribute set is not executed. — guest271314
– guest271314, Commented Jun 6, 2017 at 2:43

visibleman · Accepted Answer · 2017-06-06 02:41:06Z

4

You need to import your JavaScript file in a separate code tag. And your script elements should be either in body, or header.

<html>
  <body>
    Hello <span id="mySpan"> World! </span>

    <script src="javascript.js"></script>
    <script>
        document.getElementById('mySpan').innerHTML = worldInSpanish();
    </script>
  </body>
</html>

answered Jun 6, 2017 at 2:41

visibleman

3,3251 gold badge16 silver badges29 bronze badges

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

Comments

Christopher Bottoms · Accepted Answer · 2017-06-06 15:48:44Z

3

Note: If the "src" attribute is present, the element must be empty.

The <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains scripting statements, or it points to an external script file through the src attribute.

The src attribute specifies the URL of an external script file.

If you want to run the same JavaScript on several pages in a web site, you should create an external JavaScript file, instead of writing the same script over and over again. Save the script file with a .js extension, and then refer to it using the src attribute in the <script> tag.

Note: The external script file cannot contain the <script> tag.

Note: Point to the external script file exactly where you would have written the script.

So either you have to import js file another script tag like

<script src="javascript.js"></script>

or You can import such function on that script tag and remove src attribute that you have done firstly. Thanks.

edited Jun 6, 2017 at 15:48

Christopher Bottoms

11.4k11 gold badges60 silver badges107 bronze badges

answered Jun 6, 2017 at 4:18

orbit

1,3062 gold badges14 silver badges23 bronze badges

1 Comment

Christopher Bottoms Over a year ago

Thanks. That helps a lot. JavaScript files can simply contain functions to import, or they can also use functions. And they get executed in the web page at the point that they are found in the web page.

Shammel Lee · Accepted Answer · 2017-06-06 02:41:05Z

1

Your script tags belong within the <body> or <head> tags.

answered Jun 6, 2017 at 2:41

Shammel Lee

4,5351 gold badge19 silver badges21 bronze badges

Comments

fubar · Accepted Answer · 2017-06-06 02:42:27Z

1

You need to use separate <script> tags for your external file and inline JavaScript.

And as @ShammelLee said, within your <head> or <body> tag.

<html>
    <body>
        Hello <span id="mySpan"> World! </span>
        <script src="javascript.js"></script>
        <script>
            document.getElementById('mySpan').innerHTML = worldInSpanish();
        </script>
    </body>
</html>

answered Jun 6, 2017 at 2:42

fubar

17.4k4 gold badges43 silver badges47 bronze badges

Comments

Talha Abrar · Accepted Answer · 2017-06-06 02:57:36Z

0

This should solve the problem. you are using same tag for attaching the external, and calling the function, do it in separate tags

<html>
    <body>
        Hello <span id="mySpan"> World! </span>
    </body>
    <script src="javascript.js"></script>
    <script>
        document.getElementById('mySpan').innerHTML = worldInSpanish();
    </script>
</html>

answered Jun 6, 2017 at 2:57

Talha Abrar

8829 silver badges22 bronze badges

Collectives™ on Stack Overflow

How do I run an external javascript function in a web page?

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related