483

के लिए संभावित कारणों क्या हैं document.getElementById, $("#id")या किसी अन्य डोम विधि / jQuery चयनकर्ता तत्वों नहीं मिल रहा?

उदाहरण की समस्याओं में शामिल हैं:

jQuery चुपचाप एक घटना हैंडलर को बांधने में विफल
jQuery "गेटर" तरीकों ( .val(), .html(), .text()) लौटनेundefined
एक मानक DOM विधि लौटी nullजिसके परिणामस्वरूप कई त्रुटियां हुईं:

बिना टाइप किए गए टाइपर: शून्य की संपत्ति को '... सेट नहीं किया जा सकता है ... टाइप किए गए टाइपर: शून्य की संपत्ति को नहीं पढ़ सकते ...'

सबसे आम रूप हैं:

अनक्रेडेड टाइपआयॉर: शून्य के 'संपत्ति' को सेट नहीं कर सकता

बिना पढ़ा हुआ टाइपर्रर: प्रॉपर्टी को null की 'addEventListener' नहीं पढ़ सकता

अनक्रेडेड टाइपऑयॉर: शून्य की संपत्ति 'शैली' को नहीं पढ़ सकता है

javascript jquery dom

— फेलिक्स क्लिंग
स्रोत

32

कई सवाल पूछे जाते हैं कि एक निश्चित DOM तत्व क्यों नहीं पाया जाता है और इसका कारण अक्सर होता है क्योंकि JavaScript कोड DOM तत्व से पहले रखा जाता है। इस प्रकार के प्रश्नों के लिए यह एक विहित उत्तर है। यह सामुदायिक विकि है, इसलिए कृपया इसे सुधारने के लिए स्वतंत्र महसूस करें ।

— फेलिक्स क्लिंग

481

जब आपकी स्क्रिप्ट चली थी, तो आप जिस तत्व को खोजने की कोशिश कर रहे थे वह DOM में नहीं था ।

आपकी DOM-reliant स्क्रिप्ट की स्थिति इसके व्यवहार पर गहरा प्रभाव डाल सकती है। ब्राउज़र HTML दस्तावेज़ों को ऊपर से नीचे तक पार्स करते हैं। तत्वों को DOM में जोड़ा जाता है और स्क्रिप्ट (आम तौर पर) निष्पादित होती हैं जैसा कि वे सामना कर रहे हैं। इसका मतलब है कि आदेश मायने रखता है। आमतौर पर, स्क्रिप्ट उन तत्वों को नहीं खोज पाते हैं जो बाद में मार्कअप में दिखाई देते हैं क्योंकि उन तत्वों को डोम में जोड़ा जाना बाकी है।

निम्नलिखित मार्कअप पर विचार करें; स्क्रिप्ट # 1 विफल रहती है <div>जबकि स्क्रिप्ट # 2 सफल होती है:

<script>
  console.log("script #1: %o", document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script>
  console.log("script #2: %o", document.getElementById("test")); // <div id="test" ...
</script>

स्निपेट का विस्तार करें

तो आपको क्या करना चाहिए? आपको कुछ विकल्प मिले हैं:

विकल्प 1: अपनी स्क्रिप्ट को स्थानांतरित करें

बंद होने वाले बॉडी टैग से ठीक पहले पृष्ठ के नीचे अपनी स्क्रिप्ट को स्थानांतरित करें। आपकी स्क्रिप्ट निष्पादित होने से पहले इस दस्तावेज़ का आयोजन बाकी है:

<body>
  <button id="test">click me</button>
  <script>
    document.getElementById("test").addEventListener("click", function() {
      console.log("clicked: %o", this);
    });
  </script>
</body><!-- closing body tag -->

स्निपेट का विस्तार करें

_{नोट: स्क्रिप्ट को नीचे की ओर रखना आम तौर पर सबसे अच्छा अभ्यास माना जाता है ।}

विकल्प 2: jQuery का `ready()`

अपनी स्क्रिप्ट आस्थगित करें जब तक पूरी तरह से डोम, पार्स किया गया है का उपयोग करते हुए :$(handler)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $("#test").click(function() {
      console.log("clicked: %o", this);
    });
  });
</script>
<button id="test">click me</button>

स्निपेट का विस्तार करें

_{ध्यान दें: आप बस के लिए बाध्य कर सकते हैं DOMContentLoadedया प्रत्येक के पास अपने कार्यस्थल हैं। jQuery का एक हाइब्रिड समाधान देता है।window.onloadready()}

विकल्प 3: ईवेंट प्रतिनिधिमंडल

प्रत्यायोजित घटनाओं में यह लाभ होता है कि वे बाद के समय में दस्तावेज़ में जोड़े जाने वाले वंश तत्वों से घटनाओं को संसाधित कर सकते हैं।

जब कोई तत्व किसी घटना को बढ़ाता है (बशर्ते कि वह बुदबुदाती हुई घटना हो और उसका प्रसार कुछ भी न हो), तो उस तत्व के वंश में प्रत्येक माता-पिता को भी घटना प्राप्त होती है। यह हमें एक हैंडलर को मौजूदा तत्व और नमूना घटनाओं में संलग्न करने की अनुमति देता है क्योंकि वे इसके वंश से बबल करते हैं ... यहां तक कि हैंडलर संलग्न होने के बाद भी उन्हें जोड़ा जाता है। हमें बस यह देखना है कि घटना को यह देखना है कि क्या यह वांछित तत्व द्वारा उठाया गया था और यदि हां, तो हमारे कोड को चलाएं।

jQuery का on()प्रदर्शन हमारे लिए वह तर्क है। हम बस एक घटना का नाम, वांछित वंश के लिए एक चयनकर्ता और एक घटना हैंडलर प्रदान करते हैं:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).on("click", "#test", function(e) {
    console.log("clicked: %o",  this);
  });
</script>
<button id="test">click me</button>

स्निपेट का विस्तार करें

_{नोट: आमतौर पर, यह पैटर्न उन तत्वों के लिए आरक्षित होता है जो लोड-टाइम पर मौजूद नहीं होते थे या बड़ी मात्रा में हैंडलर संलग्न करने से बचते थे। यह भी इंगित करने योग्य है कि जब मैंने document(प्रदर्शनकारी उद्देश्यों के लिए) हैंडलर संलग्न किया है, तो आपको निकटतम विश्वसनीय पूर्वज का चयन करना चाहिए।}

विकल्प 4: `defer`विशेषता

की deferविशेषता का उपयोग करें <script>।

[ defer, एक बूलियन विशेषता,] एक ब्राउज़र को इंगित करने के लिए सेट किया गया है कि दस्तावेज़ को पार्स किए जाने के बाद स्क्रिप्ट को निष्पादित किया जाना है, लेकिन फायरिंग से पहले DOMContentLoaded।

<script src="https://gh-canon.github.io/misc-demos/log-test-click.js" defer></script>
<button id="test">click me</button>

स्निपेट का विस्तार करें

संदर्भ के लिए, उस बाहरी स्क्रिप्ट का कोड यहां दिया गया है :

document.getElementById("test").addEventListener("click", function(e){
   console.log("clicked: %o", this); 
});

_{नोट: यह deferविशेषता निश्चित रूप से एक जादू की गोली की तरह प्रतीत होती है , लेकिन इसके बारे में पता होना महत्वपूर्ण है ...

1. deferकेवल बाहरी लिपियों के लिए उपयोग किया जा सकता है, अर्थात: जिनके पास एक srcविशेषता है।

2. ब्राउज़र सपोर्ट से अवगत रहें, अर्थात: IE <10 में छोटी गाड़ी का कार्यान्वयन}

— कैनन
स्रोत

यह अब 2020 है - क्या "अभी भी" सबसे अच्छी प्रैक्टिस मानी जाने वाली पटकथा पटकथा "है? मैंने (अब) अपने सभी संसाधनों को स्क्रिप्ट में <head>उपयोग deferकिया है (मुझे पुराने-पुराने असंगत ब्राउज़रों का समर्थन नहीं करना है)

— स्टीफन पी

मैं आधुनिक ब्राउज़रों पर जाने का एक बड़ा प्रस्तावक हूं। उस ने कहा, यह अभ्यास वास्तव में मुझे कुछ भी खर्च नहीं करता है और यह हर जगह काम करता है। दूसरी ओर, दोनों deferऔर asyncकुछ ज्यादा पुराने ब्राउज़र संस्करणों के लिए बहुत व्यापक समर्थन -even तक पहुँचने वापस की है। उनके पास स्पष्ट रूप से, स्पष्ट रूप से इच्छित व्यवहार को इंगित करने का अतिरिक्त लाभ है। बस याद रखें कि ये विशेषताएँ केवल एक srcविशेषता निर्दिष्ट करने वाली स्क्रिप्ट के लिए काम करती हैं , अर्थात: बाहरी स्क्रिप्ट। लाभ तौलें। शायद दोनों का उपयोग करें? तुम्हारा कॉल।

— कैनन

146

लघु और सरल: क्योंकि आप जिन तत्वों की तलाश कर रहे हैं, वे दस्तावेज़ (अभी तक) में मौजूद नहीं हैं।

इस उत्तर के शेष के लिए मैं getElementByIdउदाहरण के रूप में उपयोग करूंगा , लेकिन यह उसी पर लागू होता है getElementsByTagName, querySelectorऔर कोई अन्य DOM विधि जो तत्वों का चयन करती है।

संभावित कारण

एक तत्व मौजूद नहीं होने के दो कारण हो सकते हैं:

दस्तावेज़ में वास्तव में पारित आईडी वाला एक तत्व मौजूद नहीं है। आपको इस बात की दोहरी जांच करनी चाहिए कि आप जिस आईडी को पास करते हैं getElementById, वह (उत्पन्न) HTML में किसी मौजूदा तत्व की आईडी से मेल खाती है और आपने आईडी को मिस नहीं किया है (आईडी केस-सेंसिटिव हैं !)।

संयोग से, समकालीन ब्राउज़रों के बहुमत में , जो लागू करते हैं querySelector()और querySelectorAll()विधियां, सीएसएस-शैली संकेतन का उपयोग इसके द्वारा एक तत्व को पुनः प्राप्त करने के लिए किया जाता है id, उदाहरण के लिए: document.querySelector('#elementID')जिस विधि से कोई तत्व इसके idतहत प्राप्त होता है, उसके विपरीत document.getElementById('elementID'); पहले #चरित्र में आवश्यक है, दूसरे में यह तत्व को पुनः प्राप्त नहीं किया जाएगा।
आपके द्वारा कॉल किए जाने के समय तत्व मौजूद नहीं है getElementById।

बाद का मामला काफी सामान्य है। ब्राउज़र पार्स करते हैं और HTML को ऊपर से नीचे तक प्रोसेस करते हैं। इसका अर्थ है कि DOM तत्व जो HTML में दिखाई देता है उससे पहले होने वाले DOM तत्व के लिए कोई भी कॉल विफल हो जाएगी।

निम्नलिखित उदाहरण पर विचार करें:

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

के बादdiv दिखाई देता है । फिलहाल स्क्रिप्ट निष्पादित हो गई है, तत्व अभी तक मौजूद नहीं है और वापस आ जाएगा ।scriptgetElementByIdnull

jQuery

यही बात jQuery के साथ सभी चयनकर्ताओं पर लागू होती है। jQuery के तत्व नहीं मिलेंगे यदि आपने अपने चयनकर्ता को गलत बताया या आप वास्तव में मौजूद होने से पहले उन्हें चुनने की कोशिश कर रहे हैं ।

एक जोड़ा मोड़ तब है जब jQuery नहीं मिला है क्योंकि आपने स्क्रिप्ट को प्रोटोकॉल के बिना लोड किया है और फ़ाइल सिस्टम से चल रहा है:

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

इस सिंटैक्स का उपयोग प्रोटोकॉल https: // वाले पृष्ठ पर HTTPS के माध्यम से स्क्रिप्ट को लोड करने और प्रोटोकॉल http: // वाले पृष्ठ पर HTTP संस्करण को लोड करने की अनुमति देने के लिए किया जाता है।

यह लोड करने का प्रयास और असफल होने का दुर्भाग्यपूर्ण दुष्प्रभाव है file://somecdn.somewhere.com...

समाधान

इससे पहले कि आप getElementById(या उस मामले के लिए कोई DOM विधि) को कॉल करें , सुनिश्चित करें कि जिन तत्वों को आप एक्सेस करना चाहते हैं, वे मौजूद हैं, यानी DOM लोड है।

यह आपके DOM को तत्सम DOM तत्व के बाद डालकर सुनिश्चित किया जा सकता है

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

जिस स्थिति में आप कोडिंग बॉडी टैग ( </body>) से ठीक पहले कोड डाल सकते हैं (सभी DOM तत्व स्क्रिप्ट निष्पादित होने के समय उपलब्ध होंगे)।

अन्य समाधानों में load ^{[एमडीएन]} या DOMContentLoaded ^{[एमडीएन]} घटनाओं को सुनना शामिल है । इन मामलों में यह कोई फर्क नहीं पड़ता कि आप जावास्क्रिप्ट कोड को दस्तावेज़ में कहाँ रखते हैं, आपको बस इवेंट हैंडलर में सभी DOM प्रोसेसिंग कोड को याद रखना होगा।

उदाहरण:

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

कृपया इवेंट हैंडलिंग और ब्राउज़र अंतर के बारे में अधिक जानकारी के लिए quirksmode.org पर लेख देखें ।

jQuery

पहले सुनिश्चित करें कि jQuery ठीक से लोड किया गया है। ब्राउज़र की डेवलपर टूल का उपयोग पता लगाने के लिए कि क्या jQuery फ़ाइल मिला था और URL सही है, तो यह नहीं था (जैसे जोड़ने http:या https:शुरुआत में योजना, पथ आदि को समायोजित)

load/ DOMContentLoaded घटनाओं को सुनना ठीक वही है जो jQuery .ready() ^{[डॉक्स] के} साथ कर रहा है । आपका सभी jQuery कोड जो DOM एलिमेंट को प्रभावित करता है, उस ईवेंट हैंडलर के अंदर होना चाहिए।

वास्तव में, jQuery ट्यूटोरियल स्पष्ट रूप से बताता है:

जब हम jQuery का उपयोग करते हुए या डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) का उपयोग करते हुए लगभग सब कुछ करते हैं, तो हमें यह सुनिश्चित करने की आवश्यकता है कि जैसे ही DOM तैयार हो, हम ईवेंट आदि जोड़ना शुरू करें।

ऐसा करने के लिए, हम दस्तावेज़ के लिए एक तैयार घटना दर्ज करते हैं।
$(document).ready(function() {
   // do stuff when DOM is ready
});

वैकल्पिक रूप से आप शॉर्टहैंड सिंटैक्स का भी उपयोग कर सकते हैं:

$(function() {
    // do stuff when DOM is ready
});

दोनों बराबर हैं।

— फेलिक्स क्लिंग
स्रोत

1

क्या ready"नए" पसंदीदा वाक्यविन्यास को प्रतिबिंबित करने के लिए घटना के बारे में अंतिम बिट में संशोधन करना उचित होगा , या क्या इसे छोड़ना बेहतर है-जैसा कि पुराने संस्करणों में काम करता है?

— टिसन टी।

1

JQuery के लिए, इसके लायक भी विकल्प में जोड़ने है $(window).load()और करने के लिए संभवतः वाक्यात्मक विकल्प ( $(document).ready(), $(function(){})? यह संबंधित लगता है, लेकिन यह महसूस करता है बिंदु आप की दिशा के लिए थोड़ा स्पर्शरेखा।

— डेविड कहते ही पुन: स्थापित मोनिका

@ डेविड: अच्छी बात है .load। वाक्यविन्यास विकल्पों के बारे में, उन्हें प्रलेखन में देखा जा सकता है, लेकिन चूंकि उत्तर स्व होना चाहिए, यह वास्तव में उन्हें जोड़ने के लायक हो सकता है। तो फिर, मुझे पूरा यकीन है कि jQuery के बारे में यह विशिष्ट बिट पहले से ही उत्तर दिया गया था और संभवतः एक और उत्तर में कवर किया गया है और इसे लिंक करना पर्याप्त हो सकता है।

— फेलिक्स क्लिंग

1

@ डेविड: मुझे संशोधित करना है: जाहिर तौर .loadपर पदावनत किया गया है: api.jquery.com/load-event । मुझे नहीं पता कि यह केवल छवियों के लिए या windowसाथ ही है।

— फेलिक्स क्लिंग

1

@ डेविड: कोई चिंता नहीं :) अगर आपको यकीन नहीं है, तो भी अच्छा है कि आपने इसका उल्लेख किया। मैं संभवतः उपयोग दिखाने के लिए सिर्फ कुछ सरल कोड स्निपेट जोड़ूंगा। आपके सहयोग के लिए धन्यवाद!

— फेलिक्स क्लिंग

15

आईडी आधारित चयनकर्ता काम क्यों नहीं करते हैं

निर्दिष्ट आईडी के साथ तत्व / DOM अभी तक मौजूद नहीं है।
तत्व मौजूद है, लेकिन यह DOM में पंजीकृत नहीं है [HTML नोड के मामले में अजाक्स प्रतिक्रियाओं से गतिशील रूप से जोड़ा गया]।
एक ही आईडी के साथ एक से अधिक तत्व मौजूद हैं जो एक संघर्ष का कारण बन रहा है।

समाधान

इसके घोषणा के बाद तत्व को एक्सेस करने की कोशिश करें या वैकल्पिक रूप से सामान का उपयोग करें $(document).ready();
अजाक्स प्रतिक्रियाओं से आने वाले तत्वों के लिए, .bind()jQuery की विधि का उपयोग करें । JQuery के पुराने संस्करणों के .live()लिए समान था।
डुप्लिकेट आईडी खोजने और उन्हें हटाने के लिए [उदाहरण के लिए, ब्राउज़रों के लिए वेबडेवलर प्लगइन] टूल का उपयोग करें।

— सुमित
स्रोत

13

जैसा कि @FelixKling ने बताया, सबसे अधिक संभावना यह है कि आपके द्वारा खोजे जा रहे नोड्स मौजूद नहीं हैं (अभी तक)।

हालाँकि, आधुनिक विकास प्रथाएं अक्सर दस्तावेज़ के पेड़ के बाहर दस्तावेज़ तत्वों को जोड़ सकती हैं या तो DocumentFragments के साथ या सीधे वर्तमान तत्वों को सीधे / पुन: व्यवस्थित करने के लिए। ऐसी तकनीकों का उपयोग जावास्क्रिप्ट टेम्प्लेटिंग के हिस्से के रूप में किया जा सकता है या अत्यधिक दमन / रिफ्लो संचालन से बचने के लिए किया जा सकता है, जबकि प्रश्न के तत्वों में भारी बदलाव किया जा रहा है।

इसी तरह, आधुनिक ब्राउज़रों में नई "शैडो डोम" कार्यक्षमता को जोड़ा जा रहा है, जो तत्वों को दस्तावेज़ का हिस्सा बनाने की अनुमति देता है, लेकिन यह दस्तावेज़ से नहीं-सक्षम होता है। यह कार्यक्षमता को एन्कैप्सुलेट करने और विशेष रूप से इसे छिपाने के लिए किया जाता है।

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

— नाथन बुबना
स्रोत

13

यदि आप जिस तत्व तक पहुँचने का प्रयास कर रहे हैं, वह अंदर है iframeऔर आप इसे इस संदर्भ के बाहर तक पहुँचाने का प्रयास करते हैं, तो iframeयह भी विफल हो जाएगा।

यदि आप एक iframe में एक तत्व प्राप्त करना चाहते हैं तो आप यह पता लगा सकते हैं कि यहाँ कैसे ।

— जॉर्ज मुलिगन
स्रोत

7

यदि स्क्रिप्ट निष्पादन आदेश समस्या नहीं है, तो समस्या का एक और संभावित कारण यह है कि तत्व को ठीक से नहीं चुना जा रहा है:

getElementByIdआईडी वर्बेटिम होने के लिए पास स्ट्रिंग की आवश्यकता होती है , और कुछ नहीं। यदि आप एक के साथ पारित स्ट्रिंग उपसर्ग करते हैं #, और आईडी के साथ शुरू नहीं होता है #, तो कुछ भी नहीं चुना जाएगा:
```
<div id="foo"></div>
```
```
// Error, selected element will be null:
document.getElementById('#foo')
// Fix:
document.getElementById('foo')
```

इसी प्रकार, getElementsByClassNameउत्तीर्ण स्ट्रिंग के साथ उपसर्ग न करें .:

<div class="bar"></div>

// Error, selected element will be undefined:
document.getElementsByClassName('.bar')[0]
// Fix:
document.getElementsByClassName('bar')[0]

एक विशेष वर्ग के नाम के साथ एक तत्व से मेल खाने के लिए querySelector, querySelectorAll, और jQuery के साथ, .सीधे वर्ग के सामने रखा । इसी तरह, एक विशेष आईडी के साथ एक तत्व का मिलान करने के लिए, #सीधे आईडी से पहले डालें :
```
<div class="baz"></div>
```
```
// Error, selected element will be null:
document.querySelector('baz')
$('baz')
// Fix:
document.querySelector('.baz')
$('.baz')
```
यहां नियम, ज्यादातर मामलों में, सीएसएस चयनकर्ताओं के लिए समान हैं, और यहां विस्तार से देखा जा सकता है ।
एक तत्व से मेल खाने के लिए जिसमें दो या दो से अधिक विशेषताएँ होती हैं (जैसे दो वर्ग के नाम, या एक वर्ग का नाम और एक data-विशेषता), चयनकर्ता स्ट्रिंग में एक दूसरे के बगल में प्रत्येक विशेषता के लिए चयनकर्ताओं को रखें, बिना किसी स्थान को अलग किए (क्योंकि एक स्थान इंगित करता है) वंशज चयनकर्ता )। उदाहरण के लिए, चयन करने के लिए:
```
<div class="foo bar"></div>
```
क्वेरी स्ट्रिंग का उपयोग करें .foo.bar। चयन करना
```
<div class="foo" data-bar="someData"></div>
```
क्वेरी स्ट्रिंग का उपयोग करें .foo[data-bar="someData"]। <span>नीचे का चयन करने के लिए :
```
<div class="parent">
  <span data-username="bob"></span>
</div>
```
उपयोग करें div.parent > span[data-username="bob"]।
उपरोक्त सभी के लिए पूंजीकरण और वर्तनी मायने रखती है । यदि पूंजीकरण अलग है, या वर्तनी अलग है, तो तत्व का चयन नहीं किया जाएगा:
```
<div class="result"></div>
```
```
// Error, selected element will be null:
document.querySelector('.results')
$('.Result')
// Fix:
document.querySelector('.result')
$('.result')
```
आपको यह भी सुनिश्चित करने की आवश्यकता है कि विधियों में उचित पूंजीकरण और वर्तनी है। इनमें से एक का उपयोग करें:
```
$(selector)
document.querySelector
document.querySelectorAll
document.getElementsByClassName
document.getElementsByTagName
document.getElementById
```
कोई अन्य वर्तनी या पूंजीकरण काम नहीं करेगा। उदाहरण के लिए, document.getElementByClassNameएक त्रुटि फेंक देंगे।
सुनिश्चित करें कि आप इन चयनकर्ता विधियों के लिए एक स्ट्रिंग पास करते हैं। आप कुछ है कि के लिए एक स्ट्रिंग नहीं है पार कर लेते हैं querySelector, getElementById, आदि, यह लगभग निश्चित रूप से काम नहीं करेगा।

— CertainPerformance
स्रोत

0

जब मैंने आपके कोड की कोशिश की, तो यह काम कर गया।

एकमात्र कारण यह है कि आपका ईवेंट काम नहीं कर रहा है, हो सकता है कि आपका DOM तैयार नहीं था और id "event-btn" वाला आपका बटन अभी तैयार नहीं था। और आपकी जावास्क्रिप्ट निष्पादित हो गई और उस तत्व के साथ घटना को बांधने की कोशिश की।

बाध्यकारी के लिए DOM तत्व का उपयोग करने से पहले, वह तत्व तैयार होना चाहिए। ऐसा करने के लिए कई विकल्प हैं।

Option1: आप अपने इवेंट बाइंडिंग कोड को दस्तावेज़ तैयार इवेंट में स्थानांतरित कर सकते हैं। पसंद:

document.addEventListener('DOMContentLoaded', (event) => {
  //your code to bind the event
});

Option2: आप टाइमआउट ईवेंट का उपयोग कर सकते हैं, ताकि कुछ सेकंड के लिए बाइंडिंग में देरी हो। पसंद:

setTimeout(function(){
  //your code to bind the event
}, 500);

विकल्प 3: अपने जावास्क्रिप्ट को अपने पृष्ठ के निचले भाग में शामिल करें।

मैं आशान्वित हूं कि इससे आपको सहायता मिलेगी।

— जतिंदर कुमार
स्रोत

@ Willdomybest18, कृपया इस उत्तर की जाँच करें

— जतिंदर कुमार

-1

समस्या यह है कि जावास्क्रिप्ट कोड निष्पादित होने के समय डोम तत्व 'स्पेकलिस्ट' नहीं बनाया जाता है। इसलिए मैंने एक फ़ंक्शन के अंदर जावास्क्रिप्ट कोड डाला और उस फ़ंक्शन को बॉडी ऑनलोड इवेंट पर बुलाया।

function do_this_first(){
   //appending code
}

<body onload="do_this_first()">
</body>

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

-1

मेरा समाधान लंगर तत्व की आईडी का उपयोग नहीं करना था <a id='star_wars'>Place to jump to</a>:। जाहिरा तौर पर ब्लेज़र और अन्य स्पा फ्रेमवर्क में एक ही पृष्ठ पर एंकर के लिए कूदने के मुद्दे हैं। चारों ओर पाने के लिए मुझे इसका उपयोग करना था document.getElementById('star_wars')। हालाँकि यह तब तक काम नहीं आया जब तक मैंने आईडी को एक पैराग्राफ तत्व में नहीं रखा <p id='star_wars'>Some paragraph<p>:।

उदाहरण बूटस्ट्रैप का उपयोग कर:

<button class="btn btn-link" onclick="document.getElementById('star_wars').scrollIntoView({behavior:'smooth'})">Star Wars</button>

... lots of other text

<p id="star_wars">Star Wars is an American epic...</p>

— goku_da_master
स्रोत

JQuery या DOM विधि जैसे getElementById तत्व क्यों नहीं खोजता है?

विकल्प 1: अपनी स्क्रिप्ट को स्थानांतरित करें

विकल्प 2: jQuery का ready()

विकल्प 3: ईवेंट प्रतिनिधिमंडल

विकल्प 4: deferविशेषता

विकल्प 2: jQuery का `ready()`

विकल्प 4: `defer`विशेषता