从HTML“onclick”运行外部Javascript函数[重复]
尽管有几个其他的解决方案，我还没有找到一个真正解决我的问题。我有一个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”，我认为每一种组合都是有意义的。当前的文件设置是一个节点app.js，它引用了包含HTML文档的文件夹public和包含throwaway程序的文件夹“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
我自己也能搞清楚这件事。谢谢！
共有2个答案
共享您的html代码。我高度怀疑您在HTML中犯了一些错误。如果您编写了如下代码，它应该可以工作：
null
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>
激发事件的最简单方法是在JS中添加事件侦听器
- 给按钮一个ID
- 在JS中按ID获取元素
- 添加click事件侦听器
null
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>
-
我已尝试在当前区域外删除脚本： 我得到这个错误：
-
问题内容： 通过使用Java Scripting API，我能够在Java中执行JavaScript。但是，有人可以解释一下我需要添加到此代码中以便能够调用C：/Scripts/Jsfunctions.js中的函数吗？ 问题答案： 使用读剧本
-
问题内容： 我不确定之前是否有人问过这个问题，或者有人在reactjs上遇到过同样的问题。所以场景是这样的，我有一个包含一些javascript 的 index.html 文件。现在，在我的react组件上，我有一个仅在条件为true时才会呈现的条件。这意味着最初在我的页面加载时，尚未呈现该组件。当我切换按钮时，这就是渲染该组件的地方。该子组件需要调用index.html中包含的javascrip
-
通过使用Java脚本API，我能够在Java中执行JavaScript。但是，有人能解释一下，为了能够调用C：/scripts/jsfunctions.js中的函数，我需要在这段代码中添加什么内容吗
-
问题内容： 我想在单击时运行一个简单的JavaScript函数，而无需任何重定向。 将JavaScript调用放入属性之间有什么区别或好处（如下所示： ）与将其放入属性（将其绑定到事件）？ 问题答案： 将href置于href中会激怒那些坚信内容与行为/行为分开的人。理由是您的html内容应仅专注于内容，而不是表示或行为。 这些天的典型路径是使用JavaScript库（例如jquery）并使用该库创
-
这里有个问题（如果你可以这么叫的话），每次我编写包含函数的JS时，它都不起作用。我知道这和空格、换行或诸如此类的东西有关。也许我不知道规则或语法。我正在使用Sublime文本3（如果它是相关的）。如果你向我解释原因，我会很感激，这样我就不会再面临这个问题了。这是一个在我的计算机上不起作用的代码 null null