从html文件中的按钮从另一个文件中触发JS函数答案

【问题标题】：Firing JS function from another file from button in html file从html文件中的按钮从另一个文件中触发JS函数
【发布时间】：2019-04-04 11:17:08
【问题描述】：

这可能是非常基本的，但我真的找不到解决方案。我正在创建自己的网站。我编写了一个 javascript 文件，简称为“main.js”。

我可以像这样在我的 HTML 文件中调用我的整个脚本：

<script src="main.js"> 
</script>

我在控制台中看到一切正常。然而，这不是我想要的。我想要的是在单击我的按钮时触发 JS 脚本中的代码。这是我尝试过的：

                <input class="button" onclick="main()" type="submit"
                    value="Submit" name="">
                </div>

所以我希望我在 HTML 文件中其他地方引用的脚本在单击我的按钮时触发“main”函数。但是目前发生的是单击按钮只是重新加载页面。

所以，要将这一切归结为一个问题：我想单击我的 html 按钮，然后从另一个名为“main.js”的脚本中触发一个函数。

我怎样才能做到这一点？

谢谢

【问题讨论】：

【解决方案1】：

我认为这可能是因为您的类型：提交。尝试将其更改为 type="button"。

希望这会有所帮助！

【讨论】：

【解决方案2】：

您正在尝试调用名为main 的函数，但您需要运行创建函数的脚本。浏览器不会自动去查找与函数同名的JS文件。

编辑 main.js 使代码出现在 function 中。

function main () {
    // Your code here
}

如果你不想在调用JS函数后提交表单，那么不要使用提交按钮来触发它。使用type="button"。

【讨论】：

对，这一切我都清楚。但我想单击我的 html 按钮，然后从 main.js 触发某个函数。例如，在我的 main.js 文件中有一个名为“button()”的函数。我想在我的 html 中单击我的按钮，然后触发“button()”。
@innomotionmedia — 如果你想打电话给button，那么说onclick="button()" 而不是onclick="main()"。

【解决方案3】：

提交按钮在将表单提交到服务器时触发重新加载，除非您的主函数返回 false。

添加

return false;

在 main 的末尾应该可以解决问题。

【讨论】：