問題:
提供的程式碼在即時站點上可以正常運行,但失敗在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中文網其他相關文章!