Mengapa JavaScript saya tidak berfungsi di JSFiddle?

114

Saya tidak dapat menemukan apa masalah dengan JSFiddle ini .

HTML:

<input type="button" value="test" onclick="test()">

JavaScript:

function test(){alert("test");}

Dan ketika saya mengklik tombol - tidak ada yang terjadi. Konsol mengatakan "tes tidak ditentukan"

Saya telah membaca dokumentasi JSFiddle - di sana dikatakan bahwa kode JS ditambahkan ke <head>dan kode HTML ditambahkan ke <body>(jadi kode JS ini lebih awal dari html dan seharusnya berfungsi).

javascript html jsfiddle Larry Cinnabar
sumber
Menghapus tanda kurung juga akan berfungsi dalam keadaan non-biola normal meskipun jelas merupakan saran yang baik untuk memisahkan js dari HTML sebanyak mungkin. Saya hanya mengizinkan diri saya sendiri style = "display: none" CSS inline no-no.
Adrian Bartholomew
terkait: JavaScript tidak berjalan di jsfiddle.net
Bergi

Jawaban:

60

Fungsi ini didefinisikan di dalam penangan beban dan karenanya berada dalam cakupan yang berbeda. Seperti yang dicatat @ellisbben di komentar, Anda dapat memperbaikinya dengan mendefinisikannya secara eksplisit di windowobjek. Lebih baik lagi, ubah untuk menerapkan penangan ke objek secara tidak mencolok: http://jsfiddle.net/pUeue/

$('input[type=button]').click( function() {
   alert("test");   
});

Perhatikan menerapkan penangan dengan cara ini, alih-alih sebaris, menjaga HTML Anda tetap bersih. Saya menggunakan jQuery, tetapi Anda dapat melakukannya dengan atau tanpa kerangka kerja atau menggunakan kerangka kerja yang berbeda, jika Anda suka.

tvanfosson.dll
sumber
@Innuendo - jsFiddle menggunakan frame terpisah untuk kode / html / style sheets. Anda perlu mereferensikan frame dalam pemanggilan fungsi, tetapi sebenarnya tidak ada cara mudah untuk melakukannya karena frame tidak memiliki nama. Ini benar-benar masalah karena cara kerja jsfiddle, tetapi tetap merupakan ide yang bagus untuk memisahkan javascript Anda sepenuhnya.
tvanfosson
5
@ tvanfosson- solusi Anda berfungsi, tetapi jsfiddle tidak menggunakan bingkai terpisah untuk menampilkan hasilnya; lihat jsfiddle.net/Yazpj/show . Alasan awalnya tidak berfungsi adalah karena testdidefinisikan di dalam onLoadfungsi; menggunakan window.test = function(){/*...*/}membuatnya bekerja dengan baik.
ellisbben
@ellisbben - jika saya menggunakan Firebug untuk memeriksa DOM, masing-masing dari 4 panel terpisah ada dalam iframe terpisah.
tvanfosson
1
Ya, tetapi jika Anda memeriksa satu iframe yang digunakan untuk menampilkan contoh, Anda akan melihat bahwa itu meletakkan semua kode dalam satu halaman yang tidak menggunakan bingkai, maka bingkai tersebut tidak dapat merusak contoh Anda. Tambahkan showke URL jsfiddle apa saja untuk melihat apa yang saya bicarakan: jsfiddle.net/Yazpj/show
ellisbben
100

Jika Anda tidak menentukan setelan bungkus, defaultnya adalah "onLoad". Ini hasil dengan semua JavaScript yang dibungkus dalam menjalankan fungsi setelah hasil dimuat. Semua variabel bersifat lokal untuk fungsi ini sehingga tidak tersedia dalam lingkup global.

Ubah setelan pembungkusan menjadi "tanpa bungkus" dan ini akan berhasil:

http://jsfiddle.net/zalun/Yazpj/1/

Saya mengalihkan kerangka kerja ke "Tidak Ada Perpustakaan" karena Anda tidak menggunakannya.

zalun
sumber
22

Ada cara lain, nyatakan fungsi Anda ke dalam variabel seperti ini:

test = function() {
  alert("test");
}

jsFiddle

Detail

EDIT (berdasarkan komentar @nnnnnn)

@nnnnn:

mengapa mengatakan test =(tanpa var) akan memperbaikinya?

Saat Anda mendefinisikan fungsi seperti ini:

var test = function(){};

Fungsi didefinisikan secara lokal, tetapi ketika Anda mendefinisikan fungsi Anda tanpa var:

test = function(){};

testdidefinisikan pada windowobjek yang berada pada cakupan tingkat atas.

mengapa ini berhasil?

Seperti @zalun katakan:

Jika Anda tidak menentukan setelan bungkus, defaultnya adalah "onLoad". Ini hasil dengan semua JavaScript yang dibungkus dalam menjalankan fungsi setelah hasil dimuat. Semua variabel bersifat lokal untuk fungsi ini sehingga tidak tersedia dalam lingkup global.

Tetapi jika Anda menggunakan sintaks ini:

test = function(){};

Anda memiliki akses ke fungsi testkarena ini ditentukan secara global

Referensi :

R3tep
sumber
2
Ini benar-benar pendekatan yang paling sederhana adalah Anda hanya menguji sedikit kode di JSFiddle.
DOK
Tapi mengapa ini berhasil? Tautan "Informasi selengkapnya" yang Anda berikan tidak menjelaskan bahwa masalah terkait dengan cakupan, atau mengapa mengatakan test = (tanpa var) akan memperbaikinya.
nnnnnn
@ R3tep baik link pertama Anda yaitu: jsfiddle.net/R3tep/Yazpj/1406 alert tidak melakukan apa-apa untuk saya. Saya menggunakan chrome.
Menyerahkan
@ R3tep ya bekerja dengan console.log. Saya akan memposting pertanyaan di SO karena saya yakin fakta bahwa saya tidak memiliki kotak peringatan terkait dengan masalah lain yang saya miliki dengan iframe.
Menyerahkan
1
@ R3tep Saya pikir Anda salah paham tetapi saya tidak yakin. Kode Anda bagus. Ada masalah dengan cara kode JSFiddle (nilai yang hilang dalam atribut sandbox dari iframe yang mereka gunakan untuk menampilkan hasil). Itu membuatnya tidak akan berfungsi pada beberapa versi chrome. Saya mengirim laporan masalah di github mereka. Saya sangat tertarik karena saya pikir masalah yang saya alami di situs web saya sama tetapi tidak. Bersulang.
Menyerahkan
3

Ubah setelan bungkus di panel Kerangka & Ekstensi, ke "Tanpa bungkus <body>"

Akademisi
sumber
-1

Tidak ada masalah dengan kode Anda. Cukup pilih ekstensi onLoad () dari sisi kanan.

Omjjh
sumber
-1 
<script> 
function test(){
 alert("test");   
}
</script>

<input type="button" value="test" onclick="test()">
Munir Muslim
sumber
-3 
Select OnDomready

HTML:

<input id="dButton" type="button" value="test"/>

JavaScript:

addEventListener('load', init, false);

function init()
{
  oInput = document.getElementById('dButton');
  oInput.onclick = test;
}

function test(){
  alert("test");
}
Ivan
sumber