JSFiddle में मेरा जावास्क्रिप्ट काम क्यों नहीं कर रहा है?

114

मुझे पता नहीं चला कि इस JSFiddle के साथ क्या समस्या है ।

HTML:

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

जावास्क्रिप्ट:

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

और जब मैं बटन पर क्लिक करता हूं - तो कुछ नहीं हुआ। कंसोल कहता है "परीक्षण परिभाषित नहीं है"

मैंने JSField प्रलेखन पढ़ा है - वहाँ यह कहता है कि JS कोड जोड़ा गया है <head>और HTML कोड जोड़ा गया है <body>(इसलिए यह JS कोड HTML से पहले है और काम करना चाहिए)।

javascript html jsfiddle

— लैरी सिनेबार
स्रोत

कोष्ठक को हटाना सामान्य गैर-फ़ेल्ड परिस्थितियों में भी काम करेगा, हालाँकि यह संभव है कि HTML से js को अधिक से अधिक अलग किया जाए। मैं केवल अपने आप को शैली = "प्रदर्शन: कोई नहीं" सीएसएस इनलाइन नंबर-नो की अनुमति देता हूं।

— एड्रियन बार्थोलोम्यू

संबंधित: जावास्क्रिप्ट jsfiddle.net पर नहीं चल रहा है

— Bergi

60

फ़ंक्शन को एक लोड हैंडलर के अंदर परिभाषित किया जा रहा है और इस प्रकार एक अलग दायरे में है। टिप्पणियों में @ellisbben नोट्स के रूप में, आप इसे windowऑब्जेक्ट पर स्पष्ट रूप से परिभाषित करके ठीक कर सकते हैं । बेहतर, अभी तक, इसे बदलने के लिए ऑब्जेक्ट को हैंडलर को विनीत रूप से लागू करने के लिए: http://jsfiddle.net/pUeue/

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

हैंडलर को इस तरह से लागू करने पर ध्यान दें, इनलाइन के बजाय, अपने HTML को साफ रखें। मैं jQuery का उपयोग कर रहा हूं, लेकिन आप इसे किसी फ्रेमवर्क के साथ या इसके बिना या किसी अन्य फ्रेमवर्क का उपयोग कर सकते हैं, यदि आप चाहें।

— tvanfosson
स्रोत

@Innuendo - jsFiddle कोड / html / स्टाइल शीट के लिए अलग फ्रेम का उपयोग करता है। आपको फ़ंक्शन कॉल में फ़्रेम को संदर्भित करने की आवश्यकता है, लेकिन वास्तव में ऐसा करने का एक आसान तरीका नहीं है क्योंकि फ्रेम में नाम नहीं है। Jsfiddle के काम करने के तरीके के कारण यह वास्तव में एक समस्या है, लेकिन यह अभी भी आपकी जावास्क्रिप्ट को पूरी तरह से अलग रखने का एक अच्छा विचार है।

— tvanfosson

5

@ tvanfosson- आपका समाधान काम करता है, लेकिन परिणाम दिखाने के लिए jsfiddle अलग फ्रेम का उपयोग नहीं करता है; jsfiddle.net/Yazpj/show देखें । शुरू में काम नहीं करने का कारण यह है कि testएक onLoadफ़ंक्शन के अंदर परिभाषित किया गया था ; उपयोग करने window.test = function(){/*...*/}से यह पूरी तरह से अच्छी तरह से काम करता है।

— ellisbben

@ellisbben - अगर मैं DOM का निरीक्षण करने के लिए Firebug का उपयोग करता हूं, तो प्रत्येक 4 अलग-अलग पैन एक अलग iframe में मौजूद हैं।

— tvanfosson

1

हां, लेकिन यदि आप उदाहरण को दिखाने के लिए उपयोग किए गए एकल आइफ्रेम की जांच करते हैं, तो आप देखेंगे कि यह सभी कोड को एक ही पृष्ठ पर रखता है जो फ़्रेम का उपयोग नहीं करता है, इसलिए वे फ़्रेम आपके उदाहरण को नहीं तोड़ सकते हैं। संलग्न showकिसी भी jsfiddle यूआरएल के लिए देखने के लिए मैं क्या बात कर रहा हूँ: jsfiddle.net/Yazpj/show

— ellisbben

100

यदि आप रैप सेटिंग को निर्दिष्ट नहीं करते हैं तो यह "onLoad" के लिए डिफॉल्ट करता है। परिणाम लोड होने के बाद चलने वाले फ़ंक्शन में सभी जावास्क्रिप्ट लिपटे हुए हैं। इस प्रकार सभी चर स्थानीय स्तर पर अनुपलब्ध हैं।

रैपिंग सेटिंग को "नो रैप" में बदलें और यह काम करेगा:

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

जैसा कि आप किसी भी उपयोग नहीं करते हैं मैंने फ्रेमवर्क को "नो लाइब्रेरी" में बदल दिया।

— zalun
स्रोत

22

एक और तरीका है, अपने फ़ंक्शन को इस तरह एक चर में घोषित करें:

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

jsFiddle

विवरण

EDIT (@nnnnnn की टिप्पणियों पर आधारित)

@nnnnnn:

क्यों कह test =(बिना var) इसे ठीक करोगे?

जब आप किसी फ़ंक्शन को इस तरह परिभाषित करते हैं:

var test = function(){};

फ़ंक्शन को स्थानीय रूप से परिभाषित किया गया है, लेकिन जब आप अपने फ़ंक्शन को बिना परिभाषित करते हैं var:

test = function(){};

testउस windowवस्तु पर परिभाषित किया गया है जो शीर्ष स्तर के दायरे में है।

यह काम क्यों करता है?

जैसे @zunun कहते हैं:

यदि आप रैप सेटिंग को निर्दिष्ट नहीं करते हैं तो यह "onLoad" के लिए डिफॉल्ट करता है। परिणाम लोड होने के बाद चलने वाले फ़ंक्शन में सभी जावास्क्रिप्ट लिपटे हुए हैं। इस प्रकार सभी चर स्थानीय स्तर पर अनुपलब्ध हैं।

लेकिन अगर आप इस सिंटैक्स का उपयोग करते हैं:

test = function(){};

आपके पास फ़ंक्शन तक पहुंच है testक्योंकि यह विश्व स्तर पर परिभाषित है

संदर्भ:

— R3tep
स्रोत

2

यह वास्तव में सबसे सरल तरीका है कि आप JSFiddle में कोड का एक छोटा सा परीक्षण कर रहे हैं।

— डीओके

लेकिन यह काम क्यों करता है? आपके द्वारा प्रदान की गई "अधिक जानकारी" लिंक यह नहीं बताती है कि समस्या गुंजाइश से संबंधित है, या क्यों कह रही है test = (बिना var) इसे ठीक करेगी।

— nnnnnn

@ R3tep आपकी पहली कड़ी जो है: jsfiddle.net/R3tep/Yazpj/1406 अलर्ट मेरे लिए कुछ नहीं करता है। मैं क्रोम पर हूं।

— Ced

@ R3tep हाँ, यह कंसोल.लॉग के साथ काम करता है। मैं SO पर एक प्रश्न पोस्ट करूंगा क्योंकि मैं इस तथ्य को मानता हूं कि मेरे पास कोई अलर्ट बॉक्स नहीं है जो कि आईफ्रेम के साथ एक और समस्या से जुड़ा हुआ है।

— Ced

1

@ R3tep मुझे लगता है कि आपने मुझे गलत समझा लेकिन मुझे यकीन नहीं है। आपका कोड अच्छा है / था। एक मुद्दा है कि कैसे JSFiddle को कोडित किया गया है (परिणाम प्रदर्शित करने के लिए वे जिस आइफ्रेम का उपयोग कर रहे हैं, सैंडबॉक्स विशेषता में लापता मूल्य)। यह ऐसा बनाता है कि यह क्रोम के कुछ संस्करण पर काम नहीं करेगा। मैंने उनके जीथूब पर एक समस्या रिपोर्ट भेजी। मुझे इसमें बहुत दिलचस्पी थी क्योंकि मुझे लगा कि मेरी वेबसाइट पर जो मुद्दा है, वही था लेकिन नहीं। चीयर्स।

— सीएसएस

3

फ़्रेम सेटिंग और एक्सटेंशन पैनल में रैप सेटिंग को "नो रैप-इन <body>" में बदलें

— एकेडेमिया
स्रोत

-1

आपके कोड के साथ कोई समस्या नहीं है। बस दाईं ओर से विस्तार onLoad () चुनें।

— Omjjh
स्रोत

-1

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

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

— मुस्लिम मुनीर
स्रोत

-3

Select OnDomready

HTML:

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

जावास्क्रिप्ट:

addEventListener('load', init, false);

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

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

— इवान
स्रोत