जावास्क्रिप्ट में हाइफ़नेटेड नामों वाले तत्वों से इवेंट श्रोताओं को कैसे जोड़ें

<पी> एमडीएन addEventListener() विधि को एक फ़ंक्शन के रूप में वर्णित करता है जिसे तब कॉल किया जाएगा जब निर्दिष्ट ईवेंट लक्ष्य तक पहुंचाया जाएगा। कोड को काम करने के लिए, आपको लक्ष्य तक पहुंचने की आवश्यकता है।

<पी> सामान्य लक्ष्य तत्व, दस्तावेज़, विंडो और कोई भी ऑब्जेक्ट हैं जो घटनाओं का समर्थन करते हैं (जैसे XMLHttpRequest)। इस लेख में, हम एक तत्व तक पहुँचना चाहते हैं ताकि हम इसे एक निर्दिष्ट घटना के लिए लक्ष्य के रूप में निर्दिष्ट कर सकें।

<पी> जब आप किसी इवेंट श्रोता को किसी विशिष्ट तत्व आईडी, क्लास या नाम के साथ डैश के साथ नोड में जोड़ने का प्रयास करेंगे तो जावास्क्रिप्ट एक त्रुटि देगा। जावास्क्रिप्ट को डैश (-) पसंद नहीं है, यह इसे माइनस के रूप में समझेगा। यह आलेख किसी तत्व के नाम में डैश (-) के कारण होने वाली जावास्क्रिप्ट त्रुटि को हल करने के लिए दो समाधान प्रदान करता है।

समाधान:डैश के कारण उत्पन्न जावास्क्रिप्ट त्रुटि को कैसे हल करें

<पी> जावास्क्रिप्ट को डैश को माइनस के रूप में समझने से रोकने के लिए उस नोड को चुनने का एक वैकल्पिक तरीका उपयोग करें जो स्ट्रिंग लेता है।

क्वेरी चयनकर्ता() का उपयोग करें

<पी> जावास्क्रिप्ट में querySelector() एक स्ट्रिंग लेता है जिसमें डैश शामिल हो सकते हैं। स्ट्रिंगिफिकेशन यह सुनिश्चित करता है कि जावास्क्रिप्ट डैश को माइनस के रूप में न समझे। एमडीएन के अनुसार, दस्तावेज़ विधि querySelector() दस्तावेज़ के भीतर पहला तत्व लौटाता है जो निर्दिष्ट चयनकर्ता, या चयनकर्ताओं के समूह से मेल खाता है। यदि कोई मिलान नहीं मिलता है, तो शून्य लौटा दिया जाता है। <पी> यह आपको आईडी चयनकर्ता का उपयोग करके एक विशिष्ट आईडी के साथ एक तत्व का चयन करने की अनुमति देता है। `e.target.new-task-description` के बजाय `e.target.querySelector('#new-task-description')` का उपयोग करें।

जावास्क्रिप्ट में हाइफ़नेटेड नामों वाले तत्वों से इवेंट श्रोताओं को कैसे जोड़ें

<पी> आप वर्ग चयनकर्ता का उपयोग करके किसी वर्ग के साथ एक तत्व का चयन भी कर सकते हैं। `e.target.querySelector('.new-task-description')`.

नोड का नाम बदलें

<पी> एक हैक समाधान है जो अनुशंसित नहीं है लेकिन काम करता है। आईडी या क्लास नाम में डैश को अंडरस्कोर से बदलकर नोड का नाम बदलें या नोड के सभी संदर्भों में डैश हटा दें, उदाहरण के लिए `e.target.new_task_description.value` और `e.target.newtaskdescription.value`.

<पी> दोनों में से कोई एक समाधान जावास्क्रिप्ट त्रुटि को ठीक कर देगा; हालाँकि, querySelector का उपयोग करना पसंदीदा समाधान है क्योंकि यह अधिक सुरुचिपूर्ण है।

एक वेरिएबल बनाना

<पी> एक अन्य समाधान जो मैंने खोजा, उसमें टास्कइनपुट नामक एक वेरिएबल बनाना, उस वेरिएबल के लिए नोड निर्दिष्ट करना और फिर वेरिएबल टास्कइनपुट को लक्ष्य से जोड़ना शामिल था। newTextInput =document.getElementById(“new-task-description”) लेकिन जब मैंने DOM में इसका परीक्षण किया तो JavaScript ने मेरी अपेक्षा के अनुरूप काम नहीं किया।

आज़माने लायक अन्य तरीके

<पी> जब मैंने getElementByID() विधि को श्रृंखलाबद्ध करने का प्रयास किया, उदा. e.target.getElementByID('नया-कार्य-विवरण'), जावास्क्रिप्ट ने एक त्रुटि उत्पन्न की। शायद कोई वाक्यविन्यास त्रुटि थी जो मैंने की और पकड़ में नहीं आया।

<पी> यदि मैंने सिंटैक्स त्रुटि नहीं की है तो सिद्धांत रूप में इसका मतलब यह होगा कि getElementByClassName() विधि को चेन करना भी काम नहीं करेगा।

<पी> ऐसी अन्य विधियाँ हैं जिन्हें मैंने आज़माया नहीं है जिन्हें आप तत्व के आधार पर जाँचना चाहेंगे।

<पी> आप किसी विशिष्ट HTML टैग के सभी तत्वों का चयन करने के लिए document.getElementsByTagName() विधि का उपयोग इस प्रकार कर सकते हैं:

<पी> getElementsByTagName('li')

<पी> और आप विशिष्ट नाम विशेषता वाले सभी तत्वों का चयन करने के लिए document.getElementsByName() विधि का उपयोग कर सकते हैं, जैसे:

<पी> getElementsByName('नया-कार्य')

परीक्षण और सीखना

<पी> मैं फ्लैटिरॉन स्कूल सॉफ्टवेयर इंजीनियरिंग फ्लेक्स प्रोग्राम में नामांकित हूं और मैं कई प्रयोगशालाओं में काम कर रहा हूं। मैं इसे लिखने के लिए प्रेरित हुआ क्योंकि मुझे यह पहचानने में मदद करने के लिए कोई लेख नहीं मिला कि जावास्क्रिप्ट मुझे त्रुटि क्यों दे रहा है। <पी> शुक्र है, फ़्लैटिरॉन स्कूल में तकनीकी प्रशिक्षक हैं जिन्होंने मुझे यह पहचानने में मदद की कि त्रुटि जावास्क्रिप्ट द्वारा डैश को माइनस के रूप में व्याख्या करने के कारण हुई थी, जिसका मैं उनकी मदद के बिना कभी अनुमान नहीं लगा सकता था क्योंकि मेरा वाक्यविन्यास सही था। उम्मीद है कि जावास्क्रिप्ट सीखने वाले अन्य लोग जिनके पास तकनीकी प्रशिक्षकों तक पहुंच नहीं है, उन्हें यह लेख उपयोगी लगेगा। हैप्पी कोडिंग!