Как связать JS из внешнего файла в HTML - PullRequest
Новая
       0

Как связать JS из внешнего файла в HTML

1 голос
/ 23 февраля 2020

Когда я связываю свой JS файл с HTML и вызываю функцию, сохраненную во внешнем файле, ничего не происходит. Я попытался включить его в <head>, но все равно ничего не появляется.
Вот файл HTML: 

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

, а вот файл extern JS: 

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");
}

Ответы [ 3 ]

1 голос
/ 23 февраля 2020

Вы можете получить функцию, загрузив файл js, и вызвать функцию с событием onclick, например: 

<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 голос
/ 23 февраля 2020

При использовании атрибута src в теге script он больше не может выполнять встроенный код между открывающим и закрывающим тегами, независимо от того, что содержится в этих двух тегах, хотя он все равно будет загружать src скрипт. 

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

Переместите тот же код в отдельный тег сценария, и он прекрасно работает. (Вот как вы должны связать JavaScript из внешнего файла). 

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

Кроме того, элемент link не предназначен для встраивания сценариев, и rel="script" является недопустимым значением для этого атрибута (см. допустимые значения атрибута rel здесь. ).

Вот почему скрипт jquery здесь не загружается: 

<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 голос
/ 23 февраля 2020

Вы можете загрузить внешний файл js или написать свой код внутри тегов скрипта. Попробуйте: 

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

Поместите теги сценария в конце тела. Вы используете идентификатор для доступа к диапазону, размещение вызова функции не имеет значения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...