时间戳

首页 > 解决方案 > 如何从 HTML 调用外部脚本文件中的函数

javascript - 如何从 HTML 调用外部脚本文件中的函数

问题描述

我试图在我的 HTML 索引文件中调用一个 javascript 函数，但我无法让它工作。这是我试图从中调用函数的 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我正在传递的参数。我做错了什么 ？感谢您的任何帮助。

标签： javascripthtmlfunction

解决方案

好的，你好。

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

我将此行放在脚本的开头以确保它有效。事实并非如此。为什么？因为您只是创建了函数但没有调用它。

解决这个问题的第一种方法 - 将你的函数放在 HTML 文档的“脚本”中。然后调用它，比如

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

推荐阅读