Question

我无法从HTML文件中调用函数。这看起来很简单，我的代码与我在类似的SO答案中看到的相匹配，但我仍然缺少一些东西。我知道JS正在加载/运行，因为画布中的游戏正在运行。编辑：Chrome控制台返回“testFunction未定义”，表示未加载JS。为什么呢？

这是JS文件中的一个测试：

function testFunction(){
    alert("It works!");
}

并且从HTML中调用它：

<button type="button" onclick="testFunction()" id="testButton">Test</button>

这是JSFiddle http://jsfiddle.net/goldrunt/SeAGU/

Answer 1

使用JSFiddle时，您的代码将包含在“onLoad”函数中（除非您明确告诉它）。

函数内定义的函数仅存在于该函数中，因此您的testFunction只能在作为JS代码块的onLoad函数中访问。来自外部的HTML无法访问它。

尝试在JSFiddle的相关选项中将“onLoad”更改为“no wrap-body”。

Answer 2

Unobtrusive JavaScript例子。

Javascript events

使用on + handler就像这样，是一种方式，也是最兼容的。

HTML

<button type="button" id="testButton">Test</button>

的Javascript

function testFunction() {
    alert("It works!");
}

window.onload = function () {
    document.getElementById('testButton').onclick = testFunction;
};

在jsFiddle

上

或使用现代方法EventTarget.addEventListener

的Javascript

function testFunction() {
    alert("It works!");
}

window.addEventListener('load', function () {
    document.getElementById('testButton').addEventListener('click', testFunction, false);
}, false);

在jsFiddle

上

GlobalEventHandlers.onload

从HTML调用JS函数

2 个答案: