首頁  >  文章  >  web前端  >  為什麼我的 JavaScript 程式碼可以在本地運行,但不能在 JSfiddle.net 上運行?

為什麼我的 JavaScript 程式碼可以在本地運行,但不能在 JSfiddle.net 上運行?

Barbara Streisand
Barbara Streisand原創
2024-10-31 21:55:02493瀏覽

Why Does My JavaScript Code Work Locally But Not on JSfiddle.net?

JavaScript 未在JSfiddle.net 上運行

問題:

提供的程式碼在即時站點上可以正常運行,但失敗在JSfiddle.net 上執行,導致控制台錯誤,例如“ReferenceError:fillList未定義”和“ReferenceError:mySelectList未定義。”

解釋:

在給定的程式碼中,這些函數是在onload 函數中定義的。雖然這允許在該函數內引用這些函數,但不能全域存取它們。因此,當您使用全域名稱(例如 fillList() 和 mySelectList)從 HTML 引用這些函數時,JSfiddle 無法識別它們。

解:

此問題有三種主要解決方案:

a) 全球化函數:

<code class="javascript">window.fillList = function() {};
window.mySelectList = function() {};</code>

這種方法使函數全域化,但並不理想,因為它污染了全域命名空間。

b) 使用不顯眼的JavaScript:

在onload 函數之外定義函數並單獨使用JavaScript 附加事件偵聽器:

<code class="javascript">function fillList() {}
function mySelectList() {}

window.onload = function() {
  var e = document.getElementById('elementId');
  e.addEventListener('click', fillList);
};</code>

這種HTML 和JavaScript 的分離是最佳實踐。

c) 修改 JSfiddle 設定:

將 JSfiddle 設定改為「No Wrap (head or body)」以防止程式碼包裝在 onload 函數中。這使得函數可以全域存取。

以上是為什麼我的 JavaScript 程式碼可以在本地運行,但不能在 JSfiddle.net 上運行?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn