从 HTML“onclick”运行外部 Javascript 函数 [重复]答案

【问题标题】：Running external Javascript functions from HTML "onclick" [duplicate]从 HTML“onclick”运行外部 Javascript 函数 [重复]
【发布时间】：2020-04-23 02:41:04
【问题描述】：

尽管有其他几种解决方案，但我还没有找到一个真正解决我的问题的方法。我有一个 HTML 文件，其中包含带有

的标题

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

在正文中有一个类似这样的按钮：

    <button onclick="basicAlert()"></button>

我有 Javascript 函数 basicAlert():

    function basicAlert() {
        alert("this is a test to see if basicAlert runs");
    }

我已经坚持了两天无济于事，但是当函数在外部文件中时，我无法让 onclick 函数执行 basicAlert()。我可以在包含函数的 HTML 中有一个脚本，它会完美运行，但是当函数在外部文件中时，它不会运行。尝试过的解决方案包括尝试 onsubmit（它是一个搜索栏），删除 'type="text/javascript"'（因为默认是 JS），以及将脚本 src 移动到文件、标题、正文的不同部分，最后等等。制作诸如“/js/throwaway.js”、“../js/throwaway”之类的路径，我认为每种组合都是有意义的。当前文件设置是从文件夹 public 引用的 Node app.js，其中包含 HTML 文档和文件夹“js”，其中包含一次性程序。是的，文件位置相对于它被引用的 HTML 是正确的。如果我可以在 HTML 中包含函数，我会的，但是会有几个函数，所以我不想弄乱 HTML 文件。

我对 javascript 和 HTML 非常陌生，因此我将不胜感激。提前致谢。

编辑：有人要求提供完整的相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Spotlight</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="./js/spotifyFunctions.js"></script>
</head>
<body>
<input type="text" class="form-control" id="songSearch" placeholder="Enter Song or Playlist...">
<button id="search" onclick="basicAlert()"><div class="search-icon"><ion-icon name="search"></ion-icon></div></button>
    <script src="link"></script> <!-- There's about 20 of these before the basic alert -->
    <script>
        function basicAlert() {
            alert("throwaway");
        }
    </script>
</body>
</html>

编辑 2：我拥有的 Javascript 文件可能是由于其导入而导致错误的罪魁祸首，感谢那些在这里帮助我的人

import Spotify from "spotify-web-api-js";
const spotifyApi = new Spotify();

//Several functions utilizing spotify API

function basicAlert() {
    alert("this is a test to see if basicAlert runs");
}
console.log("made it");

在控制台中抛出错误：

SyntaxError: import declarations may only appear at top level of a module

我自己大概可以解决这个问题。谢谢！

【问题讨论】：

Javascript 的全部内容只是 function basicAlert，仅此而已？您是否收到任何控制台错误？
虽然其他函数不仅仅是一个警报，但我只有 basicAlert() 函数来测试它是否工作。所以是的，这就是这个函数的全部内容。据我所知，没有控制台错误
所以不是全部都包含在load 或DOMContentLoaded 事件监听器中？（这是一个常见问题）如果函数没有运行，应该是一个控制台错误，即函数没有定义。也可能存在语法错误 - 控制台应该给你至少一个错误
在/js/throwaway.js 的底部添加console.log("Made it"); - 在加载 HTML 时，您是否在控制台上看到此显示？
basicAlert 没有在顶层定义，或者 Javascript 根本没有运行。首先，检查浏览器的网络选项卡并摆弄一些东西，直到 JS 正确加载

标签： javascript html web

【解决方案1】：

让事件触发的最简单方法是在 JS 中添加事件监听器

给你的按钮一个 ID
在JS中通过ID获取元素
添加点击事件监听

   function basicAlert() {
        alert("this is a test to see if basicAlert runs");
    }

// get the DOM element with JS

let bttn = document.getElementById("MyId");
bttn.addEventListener("click", basicAlert, false);

    <button id="MyId">CLick Me</button>

node.JS 可能面临的另一个问题是路径...

Node.JS 默认路径位于 NODE-Modules 文件夹中，因此它可能不会在您的 HTML 文件所在的同一位置查找该文件夹。

它将在 Node.Js 中的节点模块路径中查找

当我第一次开始使用 node 时，我遇到了同样的问题。我最终开始制作 UML 模块并使用 npm pack

那么我可以使用 requie('我想要的模块')

这里是NPM Packages and how to create them的教程

希望这会有所帮助。

【讨论】：

虽然这将 javascript 文件显示为状态 200，但它仍然不会在单击时运行该函数。此外，它不会在控制台中显示任何错误（可能是因为 HTML 没有调用任何内容）。
我的 js 文件底部也有“console.log('test')”，它没有显示在控制台中，所以我认为即使它收到 200 也没有正确导入状态
这很奇怪......如果你 npm 打包它并作为模块安装会发生什么......
您可以做的另一件事是在硬盘驱动器上为其提供一个绝对的完整物理路径
直接路径甚至不加载它，并在控制台中返回错误消息。说它无法使用物理路径加载脚本（我将 js 复制粘贴到文档（Windows）中并复制了路径）。如果它影响任何东西，我现在正在使用 USB 操作。

【解决方案2】：

分享您的 html 代码。我非常怀疑您在 html 中犯了一些错误。如果您编写了如下代码，它应该可以工作：

function basicAlert() {
	alert('Throw away!');
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<button onclick="basicAlert()">Button</button>
	<script src="./js/throwaway.js"></script>
</body>
</html>

【讨论】：

1.试过了，没有效果 2.没有脚本标签 3.basicAlert的控制台错误未定义

【解决方案3】：

在你的 throwaway.js 文件中只写 console.log("调用"); 如果您能够在控制台中看到这一点，那么您的文件正在正确加载。

如果没有，你可能需要检查 js 路径。

【讨论】：