当我将 JavaScript function 导入到我的 Z4C4DBAD5FCA2E78AAA47F 文件中时，如何修复无法工作的 onclick

Question

我有一个格式如下的按钮，但是当我尝试单击它时，它说 function 未定义； 即使我正确导入了它。

该按钮的格式如下：

<button type="button" id="ManualGain" class="buttons" onclick="IncreaseBal()">Press me for money</button>

导入的格式如下：

<script type="text/html" src="GameCode.js"></script>

这是GameCode.js中的IncreaseBal function：

function IncreaseBal() {
   GameVars.balance += 10
   document.getElementById("Balance").innerText = "Balance: " + GameVars.balance
}

GameVar function 的格式非常接近：

var GameVars = {
   balance = 0,
   ...
}

但是，我无法让它工作。

Answer 1

 <script type="text/html" src="GameCode.js"></script>

当浏览器在src属性中请求 URL 时，您正在使用type属性告诉浏览器期待 HTML 文档。 HTML 文档不是 JavaScript 程序。 由于浏览器不知道如何处理用 HTML 编写的<script> ，因此它不做任何事情。

省略常规 JavaScript 程序的type属性。

你可以说type="text/javascript"但这只会引入出错的可能性。

如果您的脚本正在加载 JavaScript 模块（此处似乎不是这种情况），您应该使用type="module" 。

---

如果您使用了这个验证器，它会为您发现错误：

错误：具有 src 属性的脚本元素不得具有除空字符串、JavaScript MIME 类型或模块以外的任何值的类型属性。

---

由于该脚本目前未加载，因此它不会在您的开发人员工具控制台上触发错误，但是：

 var GameVars = { balance = 0,

Object 文字语法使用name: value not name = value 。

---

在旁边

function IncreaseBal() { var GameVars = {

请注意，惯用的 JavaScript 为类和构造函数保留以大写字母开头的变量名（即设计用于与new关键字一起使用的东西）。 您不应该对常规函数和对象使用该命名约定。

---

在旁边

内在事件属性伴随着许多问题，包括一些非常意想不到的范围规则。 最佳做法是避免使用它们，而是使用 JavaScript 绑定事件侦听器。