如何在 html 中使用外部 javascript 函数

Question

我目前正在尝试使用 html 和外部 javascript 文件构建网页。 javascript 文件名为“main.js”，与 html 文件位于同一目录中。 我想从 html 文件中的 javascript 文件中调用一个函数。

该函数链接到使用以下行调用的按钮：

<button onclick="myFunc()">Click Me</button>

如果我使用脚本标记并将 javascript 嵌入到 html 文件中，它可以正常工作，格式为：

<script> 
funtion myFunc(){

//Code here
}
</script>

当我将此函数放在单独的 main.js 文件中，然后使用

<script type="text/javascript" src="/main.js"></script>

按钮什么也不做。 有没有我缺少的语法？

添加编辑：

这是并进行编辑以希望使问题更清楚。 我是 javascript 的初学者，如果我以一种不清楚的方式提问，我深表歉意。 下面是我用来在我的 html 文件中测试的完整 javascript 函数。 它来自w3学校，我只是用它来测试。 该函数将一个正方形从较大正方形的左上角移动到右下角。

<script>
    
    function myMove() {
    var id = null;
    var elem = document.getElementById('myAnimation');
    var pos = 350;
    clearInterval(id);
    id = setInterval(frame,10);
    function frame() {
        if (pos == 0){
            clearInterval(id);
        } else {
        pos--;
        elem.style.bottom = pos +'px';
        elem.style.right = pos + 'px';
        }
    }
}


</script>

当直接嵌入到 html 代码中时，它工作得很好。 当我把这个确切的函数放在一个名为“test.js”的外部javascript文件中，然后在html中包含对该文件的引用，所以html文件的主体是：

<script type="module" src="/test.js"></script>

<a href="../index.html"><button1>home</button1></a><br>

<button onclick="myMove()">Click Me</button>
<div id ="myContainer">
<div id ="myAnimation"></div>
</div>

作为参考，javascript 文件如下所示：

import './style.css'


function myMove() {
  var id = null;
  var elem = document.getElementById('myAnimation');
  var pos = 350;
  clearInterval(id);
  id = setInterval(frame,10);
  function frame() {
    if (pos == 0){
      clearInterval(id);
    } else {
      pos--;
      elem.style.bottom = pos +'px';
      elem.style.right = pos + 'px';
    }
  }
}

什么都没发生。 这是否使问题更清楚？

Answer 1

我这样做了，它对我有用（文件是分开的）

 function myFunc() { alert("hello") }

 <html> <head> </head> <body> <h1> Testing... </h1> <button onclick="myFunc()"> Click Me </button> <script src="./main.js"></script> </body> </html>

在简单的 python 服务器中运行代码也是一个好主意。 Python 简单服务器设置

如何在 html 中使用外部 javascript 函数

问题描述

1 个解决方案

解决方案1
-1 2022-05-18 15:37:19

如何在 html 中使用外部 javascript 函数

问题描述

1 个解决方案

解决方案1 -1 2022-05-18 15:37:19

解决方案1
-1 2022-05-18 15:37:19