JavaScript'im neden JSFiddle'da çalışmıyor?

114

Bu JSFiddle ile sorunun ne olduğunu bulamıyorum .

HTML:

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

JavaScript:

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

Ve düğmeye tıkladığımda - hiçbir şey olmadı. Konsol "test tanımlanmadı" diyor

JSFiddle belgelerini okudum - orada JS kodunun eklendiğini <head>ve HTML kodunun eklendiğini söylüyor <body>(bu nedenle bu JS kodu html'den daha öncedir ve çalışmalıdır).

javascript html jsfiddle

— Larry Cinnabar
kaynak

Parantezleri kaldırmak, normal olmayan normal koşullarda da işe yarayacaktır, ancak js'yi mümkün olduğunca HTML'den ayırmak kesinlikle iyi bir tavsiye olacaktır. Kendime yalnızca style = "display: none" CSS satır içi no-no.

— Adrian Bartholomew

ilgili: jsfiddle.net'te JavaScript çalışmıyor

— Bergi

60

Fonksiyon, bir yük alma tertibatı içinde tanımlanmaktadır ve bu nedenle farklı bir kapsamdadır. @Ellisbben yorumlarda belirttiği gibi, bunu windownesne üzerinde açıkça tanımlayarak düzeltebilirsiniz . Daha da iyisi, işleyiciyi nesneye göze batmayacak şekilde uygulamak için değiştirin: http://jsfiddle.net/pUeue/

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

İşleyiciyi satır içi yerine bu şekilde uygulamanın HTML'nizi temiz tuttuğuna dikkat edin. Ben jQuery kullanıyorum, ancak isterseniz bunu bir çerçeve ile veya çerçevesiz veya farklı bir çerçeve kullanarak yapabilirsiniz.

— tvanfosson
kaynak

@Innuendo - jsFiddle, kod / html / stil sayfaları için ayrı çerçeveler kullanır. işlev çağrısında çerçeveye başvurmanız gerekir, ancak çerçevenin bir adı olmadığı için bunu yapmanın gerçekten kolay bir yolu yoktur. Bu gerçekten jsfiddle'ın çalışma biçiminden dolayı bir sorun, ancak javascript'inizi tamamen ayrı tutmak yine de iyi bir fikirdir.

— tvanfosson

5

@ tvanfosson- çözümünüz çalışır, ancak jsfiddle sonucu göstermek için ayrı çerçeveler kullanmaz; bkz. jsfiddle.net/Yazpj/show . Başlangıçta çalışmamasının nedeni test, bir onLoadişlevin içinde tanımlanmış olmasıdır ; kullanmak window.test = function(){/*...*/}, mükemmel bir şekilde çalışmasını sağlar.

— ellisbben

@ellisbben - DOM'u incelemek için Firebug kullanırsam, 4 ayrı bölmenin her biri ayrı bir iframe'de bulunur.

— tvanfosson

1

Evet, ancak örneği göstermek için kullanılan tek iframe'i incelerseniz, tüm kodu çerçeve kullanmayan tek bir sayfaya koyduğunu göreceksiniz, bu nedenle bu çerçeveler örneğinizi kıramaz. showNeden bahsettiğimi görmek için herhangi bir jsfiddle URL'sine ekleyin : jsfiddle.net/Yazpj/show

— ellisbben

100

Kaydırma ayarını belirtmezseniz, varsayılan olarak "Yüklendiğinde" olur. Bu, sonuç yüklendikten sonra çalıştırılan tüm JavaScript ile sonuçlanır. Tüm değişkenler bu işlev için yereldir, bu nedenle genel kapsamda kullanılamaz.

Sarmalama ayarını "sarmasız" olarak değiştirin, çalışacaktır:

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

Hiç kullanmadığınız için çerçeveyi "Kitaplık Yok" olarak değiştirdim.

— zalun
kaynak

22

Başka bir yol daha var, işlevinizi şöyle bir değişkene bildirin:

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

jsFiddle

ayrıntılar

DÜZENLE (@nnnnnn'nin yorumlarına göre)

@nnnnnn:

neden test =(olmadan var) söylemek onu düzeltir?

Böyle bir işlevi tanımladığınızda:

var test = function(){};

İşlev yerel olarak tanımlanır, ancak işlevinizi aşağıdakiler olmadan tanımladığınızda var:

test = function(){};

testwindowüst düzey kapsamda olan nesne üzerinde tanımlanır .

bu neden çalışıyor?

@Zalun'un dediği gibi:

Kaydırma ayarını belirtmezseniz, varsayılan olarak "Yüklendiğinde" olur. Bu, sonuç yüklendikten sonra çalıştırılan tüm JavaScript ile sonuçlanır. Tüm değişkenler bu işlev için yereldir, bu nedenle genel kapsamda kullanılamaz.

Ancak bu sözdizimini kullanırsanız:

test = function(){};

testGlobal olarak tanımlandığı için işleve erişiminiz var

Referanslar :

— R3tep
kaynak

2

Bu gerçekten en basit yaklaşım, JSFiddle'da küçük bir kod parçasını test etmenizdir.

— DOK

Peki bu neden işe yarıyor? Sağladığınız "Daha fazla bilgi" bağlantısı, sorunun kapsamla ilgili olduğunu veya test = (olmadan var) demenin neden düzelteceğini açıklamıyor.

— nnnnnn

@ R3tep iyi ilk bağlantınız: jsfiddle.net/R3tep/Yazpj/1406 uyarısı benim için hiçbir şey yapmıyor. Chrome kullanıyorum.

— Ced

@ R3tep evet, console.log ile çalışır. SO'da bir soru göndereceğim çünkü hiçbir uyarı kutusunun olmaması gerçeğinin iframe'lerle ilgili başka bir sorunla bağlantılı olduğuna inanıyorum.

— Ced

1

@ R3tep Beni yanlış anladığını düşünüyorum ama emin değilim. Kodunuz iyi / iyiydi. JSFiddle'ın nasıl kodlandığıyla ilgili bir sorun var (sonucu görüntülemek için kullandıkları iframe'in korumalı alan özniteliğinde eksik değer). Bu, bazı krom sürümlerinde çalışmayacağı anlamına gelir. Github'larına bir sorun raporu gönderdim. Bununla o kadar ilgilendim çünkü web sitemde yaşadığım sorunun aynı olduğunu düşündüm ama hayır. Şerefe.

— Ced

3

Çerçeveler ve Uzantılar panelinde kaydırma ayarını "Kaydırma yok <body>" olarak değiştirin

— Academia
kaynak

-1

Kodunuzla ilgili bir sorun yok, sağ taraftan onLoad () uzantısını seçmeniz yeterli.

— Omjjh
kaynak

-1

<script> 
function test(){
 alert("test");   
}
</script>

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

— Müslüman Münir
kaynak

-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
kaynak