從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函數

回答

相關問題