Как вызвать функцию во внешнем файле скрипта из HTML - PullRequest
Новая
       0

Как вызвать функцию во внешнем файле скрипта из HTML

0 голосов
/ 04 мая 2020

Я пытаюсь вызвать функцию javascript в моем индексном файле HTML и не могу заставить ее работать. Это мой файл html, из которого я пытаюсь вызвать функцию. 

<div class="main">          
    <h1 class="header-main" onload="HeaderTyper('Welcome', this)">              
        <noscript>no javascript</noscript>
    </h1>
</div>
<script type="text/javascript" src="script.js"></script>

А это сценарий. 

function HeaderTyper(message, element){
  var i = 0;
  var speed = 50;
    if (i < message.length) {
      element.innerHTML += message.charAt(i);
    //play keystroke sound
    i++;
    setTimeout(HeaderTyper, speed);
  }
}

Я пытаюсь достать пишущую машинку заголовок стиля эффекта. Я планирую добавить несколько звуков нажатия клавиш, но сначала мне нужно выяснить, как на самом деле напечатать его в теге заголовка. Код не будет вводить message, который я передаю в качестве аргумента. Что я сделал не так ? Спасибо за любую помощь.

Ответы [ 4 ]

0 голосов
/ 05 мая 2020

Хорошо, привет. 

function HeaderTyper(message, element){
  alert('script loaded')  //<---
  var i = 0;

Я поместил эту строку в начало сценария, чтобы убедиться, что он работает. А это не так. Зачем? Потому что вы только что создали свою функцию, но не вызываете ее.

Первый способ решить эту проблему - поместить функцию ur в «скрипт» HTML do c. И вызовите его после, например, 

<script>
  function HeaderTyper(message) {
    let i = 0
    let speed = 50
    let element = document.querySelector('.header-main')

    if (i < message.length) {
      element.innerHTML += message.charAt(i)
      i += 1
      setTimeout(HeaderTyper, speed)
    }
  }
  HeaderTyper('Welcome')  //<---
</script>

Второй способ - поместите HeaderTyper () в конец файла script. js, чтобы функция запустилась, но вам нужно сделать ссылку для «сообщения» и «элемент». 

setTimeout(HeaderTyper, speed);
  }
}
HeaderTyper(someMessage, someElement)  //<---
0 голосов
/ 04 мая 2020

Согласно это решение , The onload event can only be used on the document(body) itself. Лучший способ добиться этого - вызвать функцию в теге <script> непосредственно перед закрывающим тегом </body>: 

<div class="main">
  <h1 class="header-main">
    <noscript>no javascript</noscript>
  </h1>
</div>


<script>
  function HeaderTyper(message) {
    var i = 0;
    var speed = 50;
    var element = document.querySelector('.header-main');

    if (i < message.length) {
      element.innerHTML += message.charAt(i);
      //play keystroke sound
      i++;
      setTimeout(HeaderTyper, speed);
    }
  }

  HeaderTyper('Welcome');
</script>
0 голосов
/ 05 мая 2020

После завершения страницы HTML (как объяснил @johannchopin) импортируйте файл и затем добавьте прослушиватель событий (как объяснил @aaronburrows). 

<body>
    <div class="main">
        <h1 class="header-main">
            <noscript>no javascript</noscript>
        </h1>
    </div>
</body>

</html>
<script type="text/javascript" src="script.js"></script>
<script>
        let h1 = document.querySelector('.header-main');
            h1.addEventListener('load', HeaderTyper("Welcome", h1, false));
</script>

Кроме того, я исправил функцию, она отсутствовали параметры. 

function HeaderTyper(message, element, i) {
    var speed = 50;
    if (i < message.length) {
        console.log(message.charAt(i))
        element.innerHTML += message.charAt(i);
        //play keystroke sound
        setTimeout(function(){ HeaderTyper(message,element,++i)}, speed);
    }
}
0 голосов
/ 04 мая 2020

Вы пытаетесь привязать вызов функции до ее загрузки в браузер. Удалите onload из HTML и добавьте прослушиватель событий в сценарий.

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

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

...