[英]How do I fix an onclick that isn't working when I import a JavaScript function into my HTML file
I have a button formatted like the one below, but when ever I try and click it, it says that the function is undefined;我有一个格式如下的按钮,但是当我尝试单击它时,它说 function 未定义; even though I have it imported correctly.
即使我正确导入了它。
The button is formatted like this:该按钮的格式如下:
<button type="button" id="ManualGain" class="buttons" onclick="IncreaseBal()">Press me for money</button>
The import is formatted like this:导入的格式如下:
<script type="text/html" src="GameCode.js"></script>
And here is the IncreaseBal function in GameCode.js:这是GameCode.js中的IncreaseBal function:
function IncreaseBal() {
GameVars.balance += 10
document.getElementById("Balance").innerText = "Balance: " + GameVars.balance
}
The GameVar function is pretty much formatted as: GameVar function 的格式非常接近:
var GameVars = {
balance = 0,
...
}
However, I haven't been able to get it to work.但是,我无法让它工作。
<script type="text/html" src="GameCode.js"></script>
You are using the type
attribute to tell the browser to expect an HTML document when it requests the URL in the src
attribute.当浏览器在
src
属性中请求 URL 时,您正在使用type
属性告诉浏览器期待 HTML 文档。 HTML documents are not JavaScript programs. HTML 文档不是 JavaScript 程序。 Since the browser doesn't know what to do with a
<script>
written in HTML, it doesn't do anything with it.由于浏览器不知道如何处理用 HTML 编写的
<script>
,因此它不做任何事情。
Omit the type
attribute for regular JavaScript programs.省略常规 JavaScript 程序的
type
属性。
You can say type="text/javascript"
but this only introduces the possibility of making an error.你可以说
type="text/javascript"
但这只会引入出错的可能性。
You should use type="module"
if your script is loading a JavaScript module (which doesn't appear to be the case here).如果您的脚本正在加载 JavaScript 模块(此处似乎不是这种情况),您应该使用
type="module"
。
If you had used this validator it would have spotted the error for you:如果您使用了这个验证器,它会为您发现错误:
Error: A script element with a src attribute must not have a type attribute whose value is anything other than the empty string, a JavaScript MIME type, or module.
错误:具有 src 属性的脚本元素不得具有除空字符串、JavaScript MIME 类型或模块以外的任何值的类型属性。
Since the script isn't loading at present, it won't be triggering an error on your developer tools console yet but:由于该脚本目前未加载,因此它不会在您的开发人员工具控制台上触发错误,但是:
var GameVars = { balance = 0,
Object literal syntax uses name: value
not name = value
. Object 文字语法使用
name: value
not name = value
。
Aside在旁边
function IncreaseBal() { var GameVars = {
Note that idiomatic JavaScript reserves variable names starting with capital letters for classes and constructor functions (ie things designed to be used with the new
keyword).请注意,惯用的 JavaScript 为类和构造函数保留以大写字母开头的变量名(即设计用于与
new
关键字一起使用的东西)。 You shouldn't use that naming convention for regular functions and objects.您不应该对常规函数和对象使用该命名约定。
Aside在旁边
Intrinsic event attributes come with a host of issues, including some very unexpected scoping rules.内在事件属性伴随着许多问题,包括一些非常意想不到的范围规则。 Best practise is to avoid them in favour of binding event listeners using JavaScript .
最佳做法是避免使用它们,而是使用 JavaScript 绑定事件侦听器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.