Mengapakah fungsi `onclick` saya tidak ditentukan dalam skrip pengguna dan bagaimana saya boleh membetulkannya menggunakan pendengar acara?

Uncaught ReferenceError: Function is Not Defined with onclick

Dalam percubaan untuk mencipta skrip emote tersuai untuk tapak web, isu timbul yang mengakibatkan ralat "Uncaught ReferenceError : fungsi tidak ditakrifkan dengan onclick."

The Masalah

Skrip mengandungi tag span dengan atribut onclick yang dipanggil fungsi. Walau bagaimanapun, apabila butang ini diklik, fungsi tersebut tidak dikenali.

Penyelesaian

Penyelesaian terletak pada mengelakkan penggunaan atribut onclick daripada skrip pengguna, kerana ia beroperasi dalam persekitaran kotak pasir yang berasingan daripada skop halaman sasaran. Sebaliknya, pendengar acara harus digunakan.

Melaksanakan Pendengar Acara

Untuk melaksanakan pendengar acara, ikuti langkah berikut:

Ganti onclick dengan Pendengar Acara

Sebaliknya menggunakan atribut onclick, gantikannya dengan addEventListener():

<span>

document.getElementById("mySpan").addEventListener("click", myFunction, false);

Lulus Data dengan Atribut Data

Memandangkan kami tidak boleh menghantar data terus kepada pendengar acara, kami boleh menggunakan atribut data:

<span>

targetSpans = emoteTab[2].querySelectorAll("span[data-usage]");
for (var J in targetSpans) {
    targetSpans[J].addEventListener("click", appendEmote, false);
}

Tambah Fungsi Emote

function appendEmote(zEvent) {
    var emoteUsage = this.getAttribute("data-usage");
    shoutdata.value += emoteUsage;
}

Tambahan Amaran

1. ID Unik:

Pastikan setiap ID digunakan sekali sahaja setiap halaman. Menggunakan ID pendua adalah tidak sah.

2. Pembuangan Pengendali Acara:

Menggunakan .outerHTML atau .innerHTML akan mengalih keluar pengendali acara sedia ada. Berhati-hati apabila menggunakan kaedah ini.

Atas ialah kandungan terperinci Mengapakah fungsi `onclick` saya tidak ditentukan dalam skrip pengguna dan bagaimana saya boleh membetulkannya menggunakan pendengar acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!