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

Question

I'm currently trying to build a webpage using html and an external javascript file.我目前正在尝试使用 html 和外部 javascript 文件构建网页。 The javascript file is named "main.js" and is in the same directory as the html file. javascript 文件名为“main.js”，与 html 文件位于同一目录中。 I'd like to call a function from the javascript file inside the html file.我想从 html 文件中的 javascript 文件中调用一个函数。

The function is linked to a button as is called using the following line:该函数链接到使用以下行调用的按钮：

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

If I use the script tag and embed the javascript inside the html file it works fine, with format:如果我使用脚本标记并将 javascript 嵌入到 html 文件中，它可以正常工作，格式为：

<script> 
funtion myFunc(){

//Code here
}
</script>

When I put this function in a separate main.js file and then call it using当我将此函数放在单独的 main.js 文件中，然后使用

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

the button does nothing.按钮什么也不做。 Is there a syntax I'm missing?有没有我缺少的语法？

ADDITION edit:添加编辑：

Here's and edit to hopefully make the question more clear.这是并进行编辑以希望使问题更清楚。 I am a beginner in javascript so apologies if I'm asking in an unclear way.我是 javascript 的初学者，如果我以一种不清楚的方式提问，我深表歉意。 Below is the full javascript function I'm using to test in my html file.下面是我用来在我的 html 文件中测试的完整 javascript 函数。 It's from w3 schools and I'm just using it to test.它来自w3学校，我只是用它来测试。 The function moves a square from the top left of a larger square to the bottom right.该函数将一个正方形从较大正方形的左上角移动到右下角。

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

When directly embedded in the html code, it works just fine.当直接嵌入到 html 代码中时，它工作得很好。 When I put this exact function in an external javascript file, named 'test.js', and then include the reference to that file in the html, so the body of the html file is:当我把这个确切的函数放在一个名为“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>

For reference, the javascript file looks like this:作为参考，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';
    }
  }
}

Nothing happens.什么都没发生。 Does this make the question more clear?这是否使问题更清楚？

Answer 1

I did this and it worked for me(the files are separate)我这样做了，它对我有用（文件是分开的）

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

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

Its also a good idea to be running your code in a simple python server.在简单的 python 服务器中运行代码也是一个好主意。 Python Simple Server Setup 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