Mengapa Kod JavaScript Saya Berfungsi Secara Tempatan Tetapi Tidak di JSfiddle.net?

JavaScript Tidak Berjalan pada JSfiddle.net

Masalah:

Kod yang disediakan berfungsi dengan betul pada tapak langsung tetapi gagal untuk melaksanakan pada JSfiddle.net, mengakibatkan ralat konsol seperti "ReferenceError: fillList is not definition" dan "ReferenceError: mySelectList is not definition."

Penjelasan:

Dalam kod yang diberikan, fungsi ditakrifkan dalam fungsi onload. Walaupun ini membolehkan fungsi dirujuk dalam fungsi itu, ia tidak boleh diakses secara global. Akibatnya, apabila anda merujuk fungsi ini daripada HTML menggunakan nama globalnya (cth., fillList() dan mySelectList), JSfiddle tidak dapat mengenalinya.

Penyelesaian:

Terdapat tiga penyelesaian utama untuk isu ini:

a) Fungsi Globalize:

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

Pendekatan ini menjadikan fungsi global tetapi tidak ideal kerana ia mencemarkan ruang nama global.

b) Gunakan JavaScript Tidak Menganggu:

Tentukan fungsi di luar fungsi onload dan lampirkan pendengar acara menggunakan JavaScript sahaja:

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

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

Pengasingan HTML dan JavaScript ini adalah amalan terbaik.

c) Ubah suai Tetapan JSfiddle:

Tukar tetapan JSfiddle kepada "Tiada Balutan (kepala atau badan)" kepada menghalang kod daripada dibalut dalam fungsi onload. Ini membolehkan fungsi boleh diakses secara global.

Atas ialah kandungan terperinci Mengapa Kod JavaScript Saya Berfungsi Secara Tempatan Tetapi Tidak di JSfiddle.net?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!