MDN addEventListener() मेथड को एक फ़ंक्शन के रूप में वर्णित करता है जिसे तब कॉल किया जाएगा जब भी निर्दिष्ट इवेंट टार्गेट तक पहुंचाया जाता है। कोड के काम करने के लिए, आपको टार्गेट तक पहुंचने की आवश्यकता है।
सामान्य टार्गेट हैं Element, Document, Window, और कोई भी ऑब्जेक्ट जो इवेंट्स का समर्थन करता है (जैसे XMLHttpRequest)। इस लेख में, हम एक एलिमेंट तक पहुंचना चाहते हैं ताकि हम इसे एक निर्दिष्ट इवेंट के लिए टार्गेट के रूप में असाइन कर सकें।
जब आप एक विशिष्ट एलिमेंट ID, Class, या Name वाले नोड में इवेंट लिसनर जोड़ने का प्रयास करते हैं जिसमें डैश होता है तो जावास्क्रिप्ट एरर फेंकता है। जावास्क्रिप्ट को डैश ( – ) पसंद नहीं है, यह इसे माइनस के रूप में समझेगा। यह लेख जावास्क्रिप्ट एरर को हल करने के लिए दो समाधान प्रदान करता है जो एलिमेंट के नाम में डैश ( – ) के कारण होता है।
हल: डैश के कारण जावास्क्रिप्ट एरर को कैसे हल करें
जावास्क्रिप्ट को डैश को माइनस समझने से रोकने के लिए उस नोड को चुनने का एक वैकल्पिक तरीका उपयोग करें जो स्ट्रिंग्स लेता है।
querySelector() का उपयोग करें
जावास्क्रिप्ट में querySelector() एक स्ट्रिंग लेता है जिसमें डैश शामिल हो सकते हैं। स्ट्रिंगिफिकेशन सुनिश्चित करता है कि जावास्क्रिप्ट डैश को माइनस के रूप में नहीं समझता। MDN के अनुसार, Document मेथड querySelector() दस्तावेज़ के भीतर पहला Element लौटाता है जो निर्दिष्ट सेलेक्टर, या सेलेक्टर्स के समूह से मेल खाता है। यदि कोई मेल नहीं मिलता है, तो null लौटाया जाता है।
यह आपको ID सेलेक्टर का उपयोग करके विशिष्ट ID वाले एलिमेंट को चुनने की अनुमति देता है, उदाहरण के लिए `e.target.new-task-description` के बजाय `e.target.querySelector('#new-task-description')` का उपयोग करें।
आप क्लास सेलेक्टर का उपयोग करके क्लास वाले एलिमेंट को भी चुन सकते हैं, उदाहरण के लिए `e.target.querySelector('.new-task-description')`।
नोड का नाम बदलें
एक हैक समाधान है जो अनुशंसित नहीं है लेकिन काम करता है। ID या क्लास नाम में डैश को अंडरस्कोर से बदलकर या डैश को उस नोड के सभी संदर्भों में हटाकर नोड का नाम बदलें, उदाहरण के लिए `e.target.new_task_description.value` और `e.target.newtaskdescription.value`।
उपरोक्त 2 समाधानों में से कोई भी जावास्क्रिप्ट एरर को ठीक करेगा; हालांकि, querySelector का उपयोग करना पसंदीदा समाधान है क्योंकि यह अधिक सुंदर है।
वेरिएबल बनाना
एक और समाधान जो मैंने खोजा उसमें taskInput नामक एक वेरिएबल बनाना, उस वेरिएबल को नोड असाइन करना, और फिर वेरिएबल taskInput को टार्गेट से चेन करना शामिल था, उदाहरण के लिए newTextInput = document.getElementById("new-task-description") लेकिन जब मैंने इसे DOM में टेस्ट किया तो जावास्क्रिप्ट ने मेरी अपेक्षा के अनुसार काम नहीं किया।
आज़माने के लिए अन्य मेथड
जब मैंने getElementByID() मेथड को चेन करने की कोशिश की, उदाहरण के लिए e.target.getElementByID('new-task-description'), जावास्क्रिप्ट ने एरर फेंका। शायद मैंने कोई सिंटैक्स एरर किया था जिसे मैंने पकड़ा नहीं।
अगर मैंने सिंटैक्स एरर नहीं किया तो सिद्धांत रूप में इसका मतलब होगा कि getElementByClassName() मेथड को चेन करना भी काम नहीं करेगा।
ऐसे अन्य मेथड हैं जिन्हें मैंने नहीं आज़माया जिन्हें आप एलिमेंट के आधार पर देखना चाह सकते हैं।
आप सभी एलिमेंट्स को एक विशिष्ट HTML टैग का चयन करने के लिए document.getElementsByTagName() मेथड का उपयोग कर सकते हैं, जैसे:
getElementsByTagName('li')
और आप document.getElementsByName() मेथड का उपयोग करके विशिष्ट नाम एट्रिब्यूट वाले सभी एलिमेंट्स का चयन कर सकते हैं, जैसे:
getElementsByName('new-task')
टेस्टिंग और सीखना
मैं फ्लैटिरॉन स्कूल सॉफ्टवेयर इंजीनियरिंग फ्लेक्स प्रोग्राम में नामांकित हूं और मैं कई लैब्स के माध्यम से काम कर रहा हूं। मैं इसे लिखने के लिए प्रेरित हुआ क्योंकि मुझे एक लेख नहीं मिला जो मुझे यह पहचानने में मदद करे कि जावास्क्रिप्ट मुझे एरर क्यों फेंक रहा था।
शुक्र है, फ्लैटिरॉन स्कूल में तकनीकी कोच हैं जिन्होंने मुझे यह पहचानने में मदद की कि एरर जावास्क्रिप्ट द्वारा डैश को माइनस के रूप में व्याख्या करने के कारण हुआ था, जिसे मैंने उनकी मदद के बिना कभी अनुमान नहीं लगाया होता क्योंकि मेरा सिंटैक्स सही था। उम्मीद है, तकनीकी कोच तक पहुंच नहीं रखने वाले अन्य जावास्क्रिप्ट सीखने वालों को यह लेख मददगार लगेगा। हैप्पी कोडिंग!
