How to link JS from an extern file in HTML

Question

When I link my JS file from HTML and call the function stored in the external file, nothing happens. I tried including it in the <head> , but still nothing shows up.
Here is the HTML file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel="script" type="text/javascript" href="js/tagline.js">
        <title>Lucas Lin</title>
    </head>
    <body>
        <header>
            <div class="container">
                <h1><a href="/">Title</a></h1>
                <span id="tagline">
                    <script src="js/tagline.js">showTagline();</script>
                </span>
            </div>
        </header>
    </body>
</html>

and here is the extern JS file:

function showTagline() {
    var taglines = ["tagline1","tagline1","tagline2",
        "tagline3","tagline4", "tagline5"];
    var num = Math.floor(Math.random() * taglines.length);
    let temp = num;
    var tagline1 = taglines[num];
    while ((num === temp)) {
        num = Math.floor(Math.random() * taglines.length);
    }
    var tagline2 = taglines[num];
    document.getElementById("tagline").innerHTML = "Lucas / " + tagline1 + " / " + tagline2;
    document.write("Hello there");
}

remove the `src=` attribute from the script where you call the function. This isn't a script from an external source, it's one you're including yourself. — Robin Zigmond, Feb 23 '20 at 15:07
Does this answer your question? [How do I link a JavaScript file to a HTML file?](https://stackoverflow.com/questions/13739568/how-do-i-link-a-javascript-file-to-a-html-file) — ksav, Feb 23 '20 at 15:08
you can call the `showTagline()` function in the js file, its good to include your external script file at the end of the html file. I think you are a newbie in front end, so please go through tutorials and start. Good luck bro — Akhil Aravind, Feb 23 '20 at 15:11
Update the above line like below For loading external javascript file you have to use script tag. — saravana, Feb 23 '20 at 15:12

score 1 · Accepted Answer · answered Feb 23 '20 at 15:13

1

You can either load an external js file or write your code inside the script tags. Try:

<body>
    <header>
        <div class="container">
            <h1><a href="/">Title</a></h1>
            <span id="tagline"></span>
        </div>
    </header>
    <script src="js/tagline.js"></script>
    <script>showTagline();</script>
</body>

Place your script tags at the end of the body. You are using the id to access the span, the placement of the function call does not matter.

answered Feb 23 '20 at 15:13

BatSwen

105
5

That fixed the problem, thanks! Can you explain why my code didn't work in the first place? – linlucas Feb 23 '20 at 16:00
3

It is not possible to load an external javascript file and execute commands in the same script tag. So either an empty script tag with the external js file as src attribute or commands/function calls between script and /script. – BatSwen Feb 23 '20 at 16:05

score 1 · Answer 2 · answered Feb 23 '20 at 15:34

You can get the function by loading the js file, and call the function with an onclick event, for example:

<body>
    <header>
        <div class="container">
            <h1><a href="/">Title</a></h1>
            <span id="tagline">
              <button onclick="showTagline()">Click me</button>
            </span>
        </div>
    </header>
  <script src="js/tagline.js"></script>
</body>

score 1 · Answer 3 · answered Feb 23 '20 at 16:05

When using the src attribute in a script tag, it is no longer able to execute the inline code between the opening and closing tags, regardless of what either of those two contain, though it will still load the src script.

<script src="https://code.jquery.com/jquery-3.4.1.min.js">
  document.write('<p>Hello World using plain js</p>');
</script>
<script>
  $('body').append("<p>Hello World using jquery</p>");
</script>

Move the same code into a separate script tag, and it functions just fine. (This is how you should link JavaScript from an external file).

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  document.write('<p>Hello World using plain js</p>');
  $('body').append("<p>Hello World using jquery</p>");
</script>

Also, the link element is not for embedding scripts, and rel="script" is an invalid value for that attribute (see valid rel attribute values here.).

That's why the jquery script does not load here:

<link rel="script" type="text/javascript" href="https://code.jquery.com/jquery-3.4.1.min.js">
<script>
  document.write('<p>Hello World using plain js</p>')
  $('body').append("<p>Hello World using jquery</p>");
</script>

How to link JS from an extern file in HTML

3 Answers3