Wenn ich meine JS-Datei aus HTML verknüpfe und die in der externen Datei gespeicherte Funktion aufrufe, passiert nichts. Ich habe versucht, es in <head> aufzunehmen, aber es wird immer noch nichts angezeigt.
Hier ist die HTML-Datei:

<!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>

Und hier ist die externe JS-Datei:

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");
}
1
linlucas 23 Feb. 2020 im 18:05

3 Antworten

Beste Antwort

Sie können entweder eine externe js-Datei laden oder Ihren Code in die Skript-Tags schreiben. Versuchen:

<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>

Platzieren Sie Ihre Skript-Tags am Ende des Körpers. Sie verwenden die ID, um auf den Bereich zuzugreifen. Die Platzierung des Funktionsaufrufs spielt keine Rolle.

1
BatSwen 23 Feb. 2020 im 15:13

Wenn Sie das Attribut src in einem script -Tag verwenden, kann der Inline-Code zwischen dem öffnenden und dem schließenden Tag nicht mehr ausgeführt werden, unabhängig davon, was eines dieser beiden Tags enthält, obwohl das noch geladen wird src Skript.

<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>

Verschieben Sie denselben Code in ein separates Skript-Tag, und es funktioniert einwandfrei. (So sollten Sie JavaScript aus einer externen Datei verknüpfen).

<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>

Das Element link dient auch nicht zum Einbetten von Skripten, und rel="script" ist ein ungültiger Wert für dieses Attribut (siehe hier gültige rel-Attributwerte.).

Deshalb wird das jquery-Skript hier nicht geladen:

<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>
1
chris 23 Feb. 2020 im 16:05

Sie können die Funktion erhalten, indem Sie die js-Datei laden und die Funktion mit einem onclick-Ereignis aufrufen, zum Beispiel:

<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>
1
salodore 23 Feb. 2020 im 15:34