从HTML调用JS函数

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

这是JS文件测试：

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

，它是一个从HTML称为像这样：

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

这里的的jsfiddle http://jsfiddle.net/goldrunt/SeAGU/

来源

2014-02-22 MattO

小提琴不符合您的代码 –

哎呀你是对刚刚更新。 – MattO

考虑让你的Javascript和HTML分开。 [Unobtrusive JavaScript]（http://en.wikipedia.org/wiki/Unobtrusive_JavaScript）和[EventTarget.addEventListener]（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener）应该有帮助。 – Xotic750

使用的jsfiddle，你的代码被封装在一个“onLoad”函数中（除非你特别说明）。

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

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

来源

2014-02-22 18:04:37

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

来源

2014-02-22 18:16:40 Xotic750

从HTML调用JS函数

回答

相关问题