Mengapa Skrip Pengguna Saya Mendapat \'ReferenceError: Function Not Defined\' pada Klik Elemen HTML dan Bagaimana Saya Boleh Membetulkannya?

ReferenceError: Function Not Defined on HTML Element Click

Isu

Apabila cuba membuat skrip pengguna untuk menambah emote tersuai pada tapak web, ralat "Uncaught ReferenceError: function is not definition" berlaku apabila mengklik butang dengan onclick atribut.

Penyelesaian

Isu timbul daripada penggunaan atribut onclick dalam skrip pengguna. Skrip pengguna dijalankan dalam persekitaran kotak pasir yang berasingan daripada halaman sasaran, jadi peristiwa onclick yang dibuat dalam skrip pengguna tidak boleh mengakses fungsi yang ditakrifkan dalam halaman.

Untuk menyelesaikannya, adalah penting untuk menggunakan addEventListener() dan bukannya atribut onclick. Ini memastikan pendengar acara ditambah dengan betul dan boleh mengakses fungsi yang ditakrifkan dalam skrip pengguna.

Contoh

Berikut ialah versi semakan kod yang menyelesaikan isu:

// Replace onclick attribute with event listener
emoteTab[2].innerHTML += '<span>

Pertimbangan Tambahan

Atribut Data Penggunaan:

Daripada menghantar data dalam atribut onclick pengendali acara, seperti yang telah dicuba sebelum ini, adalah disyorkan untuk menggunakan atribut data untuk menyimpan data dalam elemen HTML itu sendiri.

Penduaan ID:

Elakkan menggunakan semula id yang sama untuk berbilang elemen, kerana ia adalah amalan tidak sah yang boleh membawa kepada tingkah laku yang tidak dijangka.

Timpa InnerHTML:

Apabila mengubah suai innerHTML elemen, mana-mana pengendali acara sedia ada akan dialih keluar. Oleh itu, adalah penting untuk mencipta semula pendengar acara selepas membuat perubahan HTML.

Atas ialah kandungan terperinci Mengapa Skrip Pengguna Saya Mendapat \'ReferenceError: Function Not Defined\' pada Klik Elemen HTML dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!