JavaScript getElementById मेथड HTML डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) से एक एलिमेंट का चयन करता है। यदि आप इस मेथड को गलत तरीके से लिखते हैं, तो आपके प्रोग्राम में document.getElementByID is not a function त्रुटि का सामना करना पड़ेगा।
यह ट्यूटोरियल चर्चा करता है कि इस त्रुटि का क्या अर्थ है और यह क्यों उठाई जाती है। हम इस त्रुटि का एक उदाहरण देखेंगे ताकि आप सीख सकें कि इसे ठीक करने के लिए आपको क्या जानने की आवश्यकता है।
document.getElementByID is not a function
document.getElementById() मेथड JavaScript सेलेक्टर मेथड्स में से एक है। यह मेथड HTML DOM से उसके आईडी के आधार पर एक ऑब्जेक्ट प्राप्त करता है।
इस मेथड का उपयोग किसी एलिमेंट की सामग्री को मैनिपुलेट करने या किसी विशेष एलिमेंट के बारे में जानकारी प्राप्त करने के लिए किया जाता है, जैसे कि इसकी सामग्री या इसके एट्रिब्यूट्स।
आईडी को HTML में परिभाषित किया जाता है। एक आईडी किसी विशेष एलिमेंट के लिए अद्वितीय होना चाहिए:
<header id="top_header"></header>
<header>टैग मेंtop_headerआईडी है। यह आईडी<header>टैग के लिए अद्वितीय है। आईडी का उपयोग अक्सर CSS का उपयोग करके विशेष एलिमेंट्स पर स्टाइल लागू करने के लिए किया जाता है।
document.getElementById()केस-सेंसिटिव है। यह मेथड नहीं है:
- document.getelementbyid()
- document.getElementByID()
- document.GetElementById()
मेथड नाम पर कोई अन्य विविधता JavaScript द्वारा स्वीकार नहीं की जाएगी।
हालांकि ID को बड़े अक्षरों में लिखना आकर्षक है क्योंकि यह किसी अन्य शब्द का संक्षिप्त रूप है, लेकिन मेथड के लिए आवश्यक है कि आप एक अपरकेस I और एक लोअरकेस d का उपयोग करें।
getElementById मेथड के बारे में अधिक जानने के लिए, JavaScript getElementById पर हमारा गाइड पढ़ें।
एक उदाहरण परिदृश्य
हम एक कोड स्निपेट बनाने जा रहे हैं जो किसी यूज़र का हमारे एप्लिकेशन में स्वागत करता है। स्वागत संदेश एक शीर्षक में होगा जो हमारे पेज के शीर्ष पर दिखाई देता है।
इस उदाहरण के उद्देश्यों के लिए, हम एक डेमो नाम का उपयोग करने जा रहे हैं।
शुरू करने के लिए, वेबपेज के स्वागत सेक्शन के लिए हमारे बॉडी HTML कोड को परिभाषित करें:
<html>
<body>
<header>
<h1 id="welcome_title">Welcome</h1>
</header>
</body>
</html>
डिफ़ॉल्ट रूप से, हमारा <h1> टैग Welcome सामग्री रखेगा। <header> टैग वह पैरेंट टैग है जिसमें हमारा शीर्षक स्थित है। अगला, हम अपने <header> टैग के नीचे एक <script> टैग जोड़ने जा रहे हैं। स्क्रिप्ट टैग में हमारे स्वागत संदेश के लिए सभी JavaScript कोड होंगे:
... </header> <script> </script> </body> ...
हमारे स्क्रिप्ट के भीतर, हम अपने शीर्षक का चयन करने जा रहे हैं और इसकी सामग्री बदलेंगे:
var title = document.getElementByID("welcome_title");
title.textContent = "Welcome, Luke!";
getElementById() मेथड हमारे शीर्षक का चयन करता है। हम इस HTML एलिमेंट को JavaScript वेरिएबल title को असाइन करते हैं। हमारे शीर्षक की सामग्री "Welcome, Luke!" प्रदर्शित करने के लिए बदली जाएगी। हम शीर्षक बदलने के लिए textContent मेथड का उपयोग करते हैं।
आइए अपना कोड चलाएं और देखें क्या होता है। यदि हम अपना JavaScript कंसोल खोलते हैं, तो हम एक त्रुटि देख सकते हैं:
हमारा कोड सही ढंग से काम नहीं कर रहा है। हमारे शीर्षक को बदला नहीं गया है:
समाधान
हमने document.getElementByID सेलेक्टर के लिए गलत केस का उपयोग किया है। एक अपरकेस I और एक लोअरकेस d का उपयोग करने के बजाय, हमने एक अपरकेस I और D का उपयोग किया है।
JavaScript हमारे प्रोग्राम को getElementById फंक्शन को कॉल करने के रूप में पंजीकृत नहीं करता क्योंकि फंक्शन नाम केस सेंसिटिव है।
हमें अपने कोड को बदलने की आवश्यकता है ताकि हम अपने फंक्शन के लिए सही केस का उपयोग करें:
var title = document.getElementById("welcome_title");
title.textContent = "Welcome, Luke!";
अब हम अपने फंक्शन कॉल में ID के बजाय Id का उपयोग कर रहे हैं। आइए अपना नया कोड चलाएं:
हमारा प्रोग्राम सफलतापूर्वक हमारे शीर्षक की सामग्री को हमारे यूज़र के नाम को शामिल करने के लिए बदलता है।
निष्कर्ष
document.getElementById() मेथड वेब पेज से एक एलिमेंट का चयन करता है। यह मेथड आपको किसी एलिमेंट की सामग्री को देखने और बदलने देता है। जब आप इस मेथड का उपयोग करते हैं, तो आपको यह सुनिश्चित करना चाहिए कि आप अपने फंक्शन के लिए सही केस का उपयोग करें। ID सभी बड़े अक्षरों में नहीं है। मेथड के काम करने के लिए आपको एक अपरकेस I और एक लोअरकेस d का उपयोग करने की आवश्यकता है।
