Dalam teka-teki yang menarik ini, kami menyelidiki misteri kod JSFiddle yang berfungsi dengan sempurna dalam batasan penciptanya, tetapi goyah apabila dipindahkan ke laman web sendiri. Marilah kita mendedahkan rahsia yang terdapat di sebalik tingkah laku ingin tahu ini.
Kod sampel yang disediakan mempamerkan antara muka pengguna dengan elemen julat input dan kod CSS dan JavaScript yang menyokong. Semasa CSS memaparkan seperti yang dijangkakan, JavaScript kekal tidak aktif, menyebabkan kefungsian yang diingini tidak dipenuhi.
Kunci untuk memahami perkara ini enigma terletak pada penempatan kod dalam struktur HTML. Dalam JSFiddle, JavaScript dilaksanakan dalam pengendali "onload", memastikan ia berjalan selepas keseluruhan halaman dimuatkan. Walau bagaimanapun, dalam halaman web anda sendiri, kod diletakkan dalam
, yang dilaksanakan sebelum elemen input dihuraikan.Untuk membetulkan penyelewengan ini, kami mesti mengatur pelaksanaan JavaScript untuk berlaku selepas elemen yang berkaitan telah diberikan. Satu pendekatan ialah membungkus kod dalam pengendali onload, seperti yang ditunjukkan dalam JSFiddle:
<br>onload = function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// your code here});
Sebagai alternatif, jQuery menyediakan pilihan yang lebih ringkas dalam bentuk pengendali sedia dokumen:
$(document).ready(function() {
// your code here
});
Atau lebih mudah singkatan:
$(fungsi() {
// your code here
});
Akhir sekali, Penyelesaian yang sama berkesan adalah dengan menempatkan semula skrip ke penghujung dokumen HTML, memastikan ia dilaksanakan hanya selepas unsur-unsurnya. beroperasi pada telah dihuraikan. Ini memastikan JavaScript mempunyai akses kepada objek DOM yang diperlukan, membolehkannya melakukan transformasi yang dimaksudkan.
Pada dasarnya, percanggahan antara JSFiddle dan halaman web anda sendiri timbul daripada masa pelaksanaan JavaScript. Dengan melaraskan peletakan kod atau menggunakan alternatif yang disediakan, anda boleh mengatur urutan acara untuk mencapai kefungsian yang diingini.
Atas ialah kandungan terperinci Mengapa JavaScript JSFiddle Saya Pecah Apabila Saya Mengalihkannya ke Halaman Web Saya Sendiri?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
