如何从 HTML 调用外部脚本文件中的 function

Question

我试图在我的 HTML 索引文件中调用 javascript function ，但我无法让它工作。 这是我试图从中调用 function 的 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);
  }
}

我正在尝试获得打字机效果样式 header。 我打算添加一些击键声音，但首先我需要弄清楚如何在 header 标签中实际输入它。 代码不会输入我在参数中传递的message 。 我做错了什么？ 感谢您的任何帮助。

Answer 1

您正在尝试在加载到浏览器之前绑定 function 调用。 从 HTML 中删除 onload 并向脚本添加事件侦听器。

Answer 2

根据此解决方案， The onload event can only be used on the document(body) itself 。 实现此目的的最佳方法是在</body>结束标记之前的<script>标记中调用 function：

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

Answer 3

在 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，它缺少参数。

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

Answer 4

好的，你好。

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

我将此行放在脚本的开头以确保它有效。 事实并非如此。 为什么？ 因为您刚刚制作了 function 但没有调用它。

解决此问题的第一种方法 - 将您的 function 放入 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 文件的末尾，因此 function 启动，但您需要为“消息”和“元素”创建链接。

setTimeout(HeaderTyper, speed);
  }
}
HeaderTyper(someMessage, someElement)  //<---

如何从 HTML 调用外部脚本文件中的 function

问题描述

4 个解决方案

解决方案1
0 2020-05-04 20:39:13

解决方案2
0 2020-05-04 20:45:58

解决方案3
0 已采纳 2020-05-04 21:00:18

解决方案4
0 2020-05-04 21:06:46

如何从 HTML 调用外部脚本文件中的 function

问题描述

4 个解决方案

解决方案1 0 2020-05-04 20:39:13

解决方案2 0 2020-05-04 20:45:58

解决方案3 0 已采纳 2020-05-04 21:00:18

解决方案4 0 2020-05-04 21:06:46

解决方案1
0 2020-05-04 20:39:13

解决方案2
0 2020-05-04 20:45:58

解决方案3
0 已采纳 2020-05-04 21:00:18

解决方案4
0 2020-05-04 21:06:46