जावास्क्रिप्ट फ़ंक्शन को कॉल करने के लिए HTML बटन का उपयोग करना

Question

मैं जावास्क्रिप्ट फ़ंक्शन को कॉल करने के लिए एक HTML बटन का उपयोग करने की कोशिश कर रहा हूं।

यहाँ कोड है:

<input type="button" value="Capacity Chart" onclick="CapacityChart();">

हालांकि यह सही ढंग से काम नहीं करता है। क्या ऐसा करने के लिए इससे अच्छा तरीका है?

यहाँ लिंक है: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html नीचे बाएँ अनुभाग में क्षमता टैब पर क्लिक करें। यदि मान नहीं बदले हैं तो बटन को एक चेतावनी उत्पन्न करनी चाहिए और यदि आप मान दर्ज करते हैं तो एक चार्ट का उत्पादन करना चाहिए।

Comments

कृपया परिभाषित करें "सही ढंग से काम नहीं करता है"। जब आप इसे क्लिक करते हैं तो आपको क्या त्रुटि हो रही है?

— बस

बटन IE8 में काम करता है, लेकिन जावास्क्रिप्ट त्रुटि के कारण FF 3.5 नहीं (जेफ का जवाब देखें)

— क्रिस शट्स

हाँ, दस्तावेज़ निकलता है। यह एक अमानवीय IE चीज़ है; सुझाए गए विकल्प के साथ मेरे जवाब को अपडेट किया।

— जेफ

@ paper1337, @ जेफ़: फ़ंक्शन अभी भी IE8 में वांछित प्रभाव को प्राप्त नहीं करता है, इसलिए भी document.getElementById के लिए document.all स्वैपिंग इसे ठीक नहीं करेगा।

— एंडी ई

Answer 1

HTML / DOM के साथ ईवेंट्स को हैंडल करने के कुछ तरीके हैं। कोई वास्तविक सही या गलत तरीका नहीं है, लेकिन अलग-अलग तरीके अलग-अलग स्थितियों में उपयोगी होते हैं।

1: इसे HTML में परिभाषित करना है:

<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />

2: जावास्क्रिप्ट में ईवेंट के लिए इसे DOM प्रॉपर्टी में शामिल करना है:

//- Using a function pointer:
document.getElementById("clickMe").onclick = doFunction;

//- Using an anonymous function:
document.getElementById("clickMe").onclick = function () { alert('hello!'); };

3: और जावास्क्रिप्ट का उपयोग करके ईवेंट हैंडलर को एक फ़ंक्शन संलग्न करना है:

var el = document.getElementById("clickMe");
if (el.addEventListener)
    el.addEventListener("click", doFunction, false);
else if (el.attachEvent)
    el.attachEvent('onclick', doFunction);

दूसरे और तीसरे तरीके दोनों इनलाइन / अनाम कार्यों के लिए अनुमति देते हैं और दोनों को दस्तावेज़ से तत्व के पार्स होने के बाद घोषित किया जाना चाहिए। पहला तरीका वैध XHTML नहीं है क्योंकि XHTML विनिर्देश में onclick विशेषता नहीं है।

पहली और दूसरी विधियाँ पारस्परिक रूप से अनन्य हैं, जिसका अर्थ है कि एक (2) का उपयोग दूसरे (1) को ओवरराइड करेगा। तीसरी विधि आपको एक ही ईवेंट हैंडलर के लिए जितने चाहें उतने फ़ंक्शन संलग्न करने की अनुमति देगा, भले ही पहली या दूसरी विधि का भी उपयोग किया गया हो।

सबसे अधिक संभावना है, समस्या आपके CapacityChart()कार्य में कहीं निहित है । आपके लिंक पर जाने और अपनी स्क्रिप्ट चलाने के बाद, CapacityChart () फ़ंक्शन चलता है और दो पॉपअप खोले जाते हैं (एक स्क्रिप्ट के अनुसार बंद है)। जहां आपके पास निम्नलिखित पंक्ति है:

CapacityWindow.document.write(s);

इसके बजाय निम्नलिखित प्रयास करें:

CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();

संपादित करें
जब मैंने आपका कोड देखा तो मुझे लगा कि आप इसे विशेष रूप से IE के लिए लिख रहे हैं। दूसरों के रूप में उल्लेख किया है आप के संदर्भ प्रतिस्थापित करने की आवश्यकता होगी document.allके साथ document.getElementById। हालाँकि, इसके बाद भी आपके पास स्क्रिप्ट को ठीक करने का कार्य होगा, इसलिए मैं इसे कम से कम IE में काम करने की सलाह दूंगा क्योंकि क्रॉस ब्राउज़र को काम करने के लिए आप कोड बदलने के लिए जो भी गलती करते हैं वह और भी अधिक भ्रम पैदा कर सकता है। एक बार IE में काम करने के बाद यह बताना आसान होगा कि क्या आप अन्य ब्राउज़र में काम कर रहे हैं जबकि आप कोड को अपडेट कर रहे हैं।

Comments

Jquery का उपयोग करना, यह भी है:$("#clickMe").bind('click', function () { alert('hello!'); };)

— रोमन

Answer 2

मैं यह कहना चाहूंगा कि जावास्क्रिप्ट को संयुक्त राष्ट्र के अप्रचलित तरीके से जोड़ना बेहतर होगा ...

अगर jQuery का उपयोग कर आप कुछ ऐसा कर सकते हैं:

<script>
  $(document).ready(function(){
    $('#MyButton').click(function(){
       CapacityChart();
    });
  });
</script>

<input type="button" value="Capacity Chart" id="MyButton" >

Comments

माना। कई मामलों में, jQuery और अन्य चौखटे जावास्क्रिप्ट की छोटी मात्रा के लिए सरासर ओवरकिल हैं और सभी जावास्क्रिप्ट कोड को क्रॉस-ब्राउज़र की आवश्यकता नहीं है।

— एंडी ई

पर्याप्त रूप से .. जिस बिंदु को मैं बनाने की कोशिश कर रहा था, वह "ऐसा करने का एक बेहतर तरीका है" विनीत रूप से ... बिना jQuery के, कुछ इस तरह: var btn = document.getElementById ('MyButton'); btn.onclick = function () {CapacityChart ();}

— पॉल

JQuery का उपयोग करने वाले ये लोग सब कुछ वेब के लिए इसका उपयोग करने के लिए तैयार लग रहे हैं। कैसे एक के लिए फ्लैट जावास्क्रिप्ट का उपयोग करने के बारे में? अच्छाई, jQuery वास्तव में अब मेरी नसों पर हो रही है। जबरदस्त हंसी! बीमार इसे वेब बनाने का आलसी आदमी का तरीका कहते हैं, क्योंकि मुझे लगता है कि यह सब वास्तव में है।

— DoctorLouie

@ डॉली: मेरे पास jQuery के खिलाफ कुछ भी नहीं है, यह कई समस्याओं का एक अच्छा समाधान है, लेकिन जब यह ओपी द्वारा टैग या पूछा नहीं जाता है तो jQuery के किसी भी उल्लेख को गैर-jQuery विधि द्वारा भी सहायता दी जानी चाहिए, अन्यथा वे जोखिम को चलाते हैं। a) पूछने वाले को भ्रमित करना - वह यह नहीं जान सकता है कि jQuery क्या है या b) जावास्क्रिप्ट कोड की कुछ पंक्तियों के लिए jQuery का उपयोग करने के लिए कहकर उसे परेशान करना। @Paul - मुझे कहना होगा कि एक महान पढ़ा नहीं था ...

— एंडी ई

माफी ... गलत लिंक पोस्ट किया गया - स्टैकओवरफ्लो एक पोस्ट करने के लिए। stackoverflow.com/questions/1588374/…

— पॉल

Answer 3

आपका HTML और बटन से फ़ंक्शन को कॉल करने का तरीका सही लगता है।

समस्या में प्रतीत होता है CapacityCount फ़ंक्शन । मैं फ़ायरफ़ॉक्स 3.5 पर अपने कंसोल में यह त्रुटि पा रहा हूं: bendelcorp.js की लाइन 759 पर "document.all अपरिभाषित है"।

संपादित करें:

ऐसा लगता है document.allकि एक IE-only चीज है और DOM तक पहुँचने का एक गैर-तरीका है। यदि आप उपयोग करते हैं document.getElementById(), तो यह शायद काम करना चाहिए। उदाहरण: के document.getElementById("RUnits").valueबजायdocument.all.Capacity.RUnits.value

Comments

यह विशेष रूप से फ़ंक्शन के साथ समस्या नहीं है, जो कि आईई

— एंडी ई

Answer 4

यह सही लग रहा है। मुझे लगता है कि आपने अपने फ़ंक्शन को एक अलग नाम या एक संदर्भ में परिभाषित किया है जो बटन पर दिखाई नहीं देता है। कृपया कुछ कोड जोड़ें

Answer 5

बस इतना पता है, जब आप फ़ंक्शन को कॉल करते हैं तो सेमीकोलन ( ; ) बटन में नहीं होना चाहिए।

तो यह सिर्फ इस तरह दिखना चाहिए: onclick="CapacityChart()"

तो यह सब काम करना चाहिए :)

Answer 6

आपके पास एक बड़ी समस्या यह है कि आप बिना किसी अच्छे कारण के ब्राउज़र को सूँघ रहे हैं:

if(navigator.appName == 'Netscape')
    {
      vesdiameter  = document.forms['Volume'].elements['VesDiameter'].value;
      // more stuff snipped
    }
    else
    {
      vesdiameter  = eval(document.all.Volume.VesDiameter.value);
      // more stuff snipped
    }

मैं Chrome पर हूं, इसलिए navigator.appNameऐसा नहीं होगा Netscape। Chrome समर्थन करता हैdocument.all ? शायद, लेकिन फिर शायद नहीं। और अन्य ब्राउज़रों के बारे में क्या?

Netscapeशाखा पर कोड का संस्करण 1996 से नेटस्केप नेविगेटर 2 पर किसी भी ब्राउज़र पर वापस काम करना चाहिए, इसलिए आपको संभवतः बस उसी के साथ रहना चाहिए ... सिवाय इसके कि यह काम नहीं करेगा (या काम करने की गारंटी नहीं है) ) क्योंकि आपने तत्वों nameपर एक विशेषता निर्दिष्ट नहीं की inputहै, इसलिए उन्हें elementsनाम तत्वों के रूप में सरणी में नहीं जोड़ा जाएगा :

<input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();">

या तो उन्हें एक नाम दें और elementsसरणी का उपयोग करें , या (बेहतर) उपयोग करें

var vesdiameter = document.getElementById("VesDiameter").value;

जो सभी आधुनिक ब्राउज़रों पर काम करेगा - कोई शाखा आवश्यक नहीं है। बस सुरक्षित पक्ष पर होना चाहिए, getElementByIdसमर्थन के लिए एक चेक के साथ 4 या उससे अधिक के बराबर ब्राउज़र संस्करण के लिए सूँघना :

if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it
    // do stuff...
}

आप शायद अपने इनपुट को भी मान्य करना चाहते हैं; कुछ इस तरह

var vesdiameter = parseFloat(document.getElementById("VesDiameter").value);
if (isNaN(vesdiameter)) {
    alert("Diameter should be numeric");
    return;
}

मदद करेगा।

Comments

हाय NickFitz, यहाँ मेरी चुनौतियों में से एक यह है कि यह स्क्रिप्ट मूल रूप से 1993 में लिखी गई थी - इसलिए नेटस्केप 4 का संदर्भ। मुझे इसे अपडेट करने में कुछ मदद मिली और यह तब तक काम किया जब तक मुझे इसके पदनाम पृष्ठ में सम्मिलित नहीं किया गया।

— फॉरेस्ट डेस

मुझे संदेह है कि यह 1993 में लिखा गया था, क्योंकि ब्रेंडन ईच ने 1995 तक जेएन का आविष्कार नहीं किया था ।wikipedia.org/ wiki/ Javascript# History ;-) मैं दृढ़ता document.getElementByIdसे अन्य सामान का उपयोग करने और अलग करने की सिफारिश करूंगा ।

— NickFitz

मुझे लगता है कि ब्राउज़र संगतता पर काम करने से पहले IE में काम करना कम से कम समझदारी होगा, अन्यथा उसे पता नहीं चलेगा कि क्या उसके ब्राउज़र संगतता मुद्दों को ठीक किया जाएगा क्योंकि यह अभी भी काम नहीं करेगा।

— एंडी ई

मानक डोम तकनीकों का उपयोग करके इसे प्राप्त करने के लिए बेहतर है, फिर :-) के बारे में बात करने के लिए ब्राउज़र की कोई समस्या नहीं होगी

— NickFitz 12

Answer 7

आपका कोड इस पंक्ति में विफल हो रहा है:

var RUnits = Math.abs(document.all.Capacity.RUnits.value);

मैं कदम रखने की कोशिश की, हालांकि यह फ़ायरबग के साथ है और यह वहाँ विफल रहता है। आपको समस्या का पता लगाने में मदद करनी चाहिए।

आपने jquery को संदर्भित किया है। आप इन सभी कार्यों में इसका उपयोग कर सकते हैं। यह आपके कोड को महत्वपूर्ण रूप से साफ़ करेगा।

Comments

हालांकि यह उस लाइन पर IE में विफल नहीं है।

— एंडी ई

क्योंकि document.all एक IE चीज़ है। उसे बस $ ('# RUints') का उपयोग करना चाहिए। वैल () jquery अंकन b / c वह पहले से ही jquery सहित है। यह किसी भी भिन्नता का ध्यान रखता है और कोड को साफ करता है।

— पेट्रीसिया

Answer 8

मेरे पास एक बुद्धिमान फ़ंक्शन-कॉल-बैकिंग बटन कोड है:

<br>
<p id="demo"></p><h2>Intelligent Button:</h2><i>Note: Try pressing a key after clicking.</i><br>
<button id="button" shiftKey="getElementById('button').innerHTML=('You're pressing shift, aren't you?')" onscroll="getElementById('button').innerHTML=('Don't Leave me!')" onkeydown="getElementById('button').innerHTML=('Why are you pressing keys?')" onmouseout="getElementById('button').innerHTML=('Whatever, it is gone.. maybe')" onmouseover="getElementById('button').innerHTML=('Something Is Hovering Over Me.. again')" onclick="getElementById('button').innerHTML=('I was clicked, I think')">Ahhhh</button>

Answer 9

सरल उत्तर:

   onclick="functionName(ID.value);

जहां ID इनपुट फ़ील्ड की आईडी है।

Answer 10

मूर्खतापूर्ण तरीके:

onclick="javascript:CapacityChart();"

आपको असतत जावास्क्रिप्ट के बारे में पढ़ना चाहिए, और कॉलबैक को डोम ईवेंट में बाँधने के लिए एक फ्रेमवर्क बाइंड विधि का उपयोग करना चाहिए।

Comments

@ शेरोन: ओह चलो। यह उसकी समस्या नहीं है, यह धारणा पूरी तरह से ठीक है, और केवल एक ऑन्कलिक घटना को असाइन करने के लिए जटिल बाइंडिंग और रूपरेखा में शामिल होने का कोई कारण नहीं है।

— पेक्का

मेरे बचाव पाइका में आने के लिए धन्यवाद। मैं सिर्फ एक साधारण बटन सही ढंग से काम करना चाहता हूं।

— फॉरेस्ट डेस

javascript:प्रोटोकॉल में की जरूरत नहीं है onclickघटना। ऑन्कलिक घटना पहले से ही जावास्क्रिप्ट है। javascript:प्रोटोकॉल के लिए एक कड़ी के href विशेषता में जावास्क्रिप्ट को क्रियान्वित करने के लिए है।

— वेब_डिजाइनर