अशक्त की संपत्ति 'addEventListener' पढ़ नहीं सकते

Question

मुझे एक परियोजना के लिए वेनिला जावास्क्रिप्ट का उपयोग करना होगा। मेरे पास कुछ फ़ंक्शन हैं, जिनमें से एक बटन है जो एक मेनू खोलता है। यह उन पृष्ठों पर काम करता है जहां लक्ष्य आईडी मौजूद है, लेकिन उन पृष्ठों पर त्रुटि का कारण बनता है जहां आईडी मौजूद नहीं है। उन पेजों पर जहां फ़ंक्शन आईडी नहीं ढूंढ सकता है, मुझे "अशक्त" संपत्ति को 'null के' AddEventListener '' त्रुटि और मेरे अन्य कार्यों में से कोई भी काम नहीं मिलता है।

नीचे मेनू खोलने वाले बटन के लिए कोड है।

function swapper() {
toggleClass(document.getElementById('overlay'), 'open');
}

var el = document.getElementById('overlayBtn');
el.addEventListener('click', swapper, false);

var text = document.getElementById('overlayBtn');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};

इससे मैं कैसे निपटूं? मुझे संभवतः इस कोड को किसी अन्य फ़ंक्शन में लपेटने की आवश्यकता है या यदि / अन्यथा विवरण का उपयोग करें ताकि यह केवल विशिष्ट पृष्ठों पर आईडी की खोज करे, लेकिन निश्चित रूप से निश्चित नहीं है।

Comments

क्या आप html कोड दिखा सकते हैं। ऐसा लगता है कि आईडी 'ओवरलेबटन' के साथ तत्व नहीं मिल सकता है

— BlaShadow

उन पेजों पर जहां फ़ंक्शन आईडी नहीं ढूंढ सकता है, मुझे "अशक्त" संपत्ति को 'null के' AddEventListener '' त्रुटि और मेरे अन्य कार्यों में से कोई भी काम नहीं मिलता है। मुझे लगता है कि सवाल में जवाब बहुत ज्यादा था। आप तत्व नहीं ढूंढ सकते हैं, इसलिए आप इसमें इवेंट श्रोता नहीं जोड़ सकते हैं ...

— Etai

यह केवल तब हो सकता है जब आपने classअपने html में उपयोग किया है idऔर आप getElementByIdअपनी स्क्रिप्ट में कॉल कर रहे हैं।

— देके

Answer 1

मुझे लगता है कि elईवेंट श्रोता को जोड़ने से पहले सबसे आसान तरीका यह देखना होगा कि यह शून्य नहीं है:

var el = document.getElementById('overlayBtn');
if(el){
  el.addEventListener('click', swapper, false);
}

Comments

बहुत बढ़िया। इसने चाल चली। मैं भी अगर उस बयान में onclick फ़ंक्शन ले गया। मैंने अंतिम कोड नीचे पोस्ट किया है।

— मोरकॉलो

यह nullप्रतिक्रिया घटक माउंट होने से पहले होगा !

धन्यवाद आदमी: डी बिल्कुल मैं क्या देख रहा था .... मुझे अपने ऐप में कई श्रोता मिले हैं, और सुनने वाले अलग-अलग विचारों में फैले हुए हैं। यदि तत्व पृष्ठ पर मौजूद है, तो यह मेरे जेएस

— वेगास्टूडियोज

इतना उपयोगी, धन्यवाद!

— sc_props

Answer 2

ऐसा लगता है कि document.getElementById('overlayBtn');लौट रहा हैnull क्योंकि यह DOM के पूरी तरह लोड होने से पहले निष्पादित होता है।

अगर आप इस लाइन को कोड के तहत रखते हैं

window.onload=function(){
  -- put your code here
}

तब यह बिना किसी समस्या के चलेगा।

उदाहरण:

window.onload=function(){
    var mb = document.getElementById("b");
    mb.addEventListener("click", handler);
    mb.addEventListener("click", handler2);
}


function handler() {
    $("p").html("<br>" + $("p").text() + "<br>You clicked me-1!<br>");
}

function handler2() {
    $("p").html("<br>" + $("p").text() + "<br>You clicked me-2!<br>");
}

Answer 3

मैंने ऐसी ही स्थिति का सामना किया। यह संभवतः इसलिए है क्योंकि पृष्ठ लोड होने से पहले स्क्रिप्ट निष्पादित की जाती है। पृष्ठ के निचले भाग में स्क्रिप्ट रखकर, मैंने समस्या को दरकिनार कर दिया।

Comments

हाँ, मुझे लगता है कि परिदृश्य के आधार पर इस समस्या के कई समाधान हैं।

— rpeg

Answer 4

मुझे वही त्रुटि मिल रही थी, लेकिन अशक्त जांच करने से मदद नहीं मिली।

मुझे जो समाधान मिला वह यह था कि जब डोम पूरा लोड हो रहा हो, तो पूरे दस्तावेज़ के लिए एक इवेंट श्रोता के अंदर अपने फ़ंक्शन को लपेटें।

document.addEventListener('DOMContentLoaded', function () {
    el.addEventListener('click', swapper, false);
});

मुझे लगता है कि यह इसलिए है क्योंकि मैं एक फ्रेमवर्क (कोणीय) का उपयोग कर रहा हूं जो मेरे HTML वर्गों और आईडी को गतिशील रूप से बदल रहा है।

Comments

मैं इलेक्ट्रॉन के साथ खेलते समय उसी समस्या में चलता हूं। उसी विधि का उपयोग करके इसे बचाया।

— चार्ल्स

Answer 5

यह सिर्फ आपके जेएस को HTML भाग से पहले लोड करता है और इसलिए यह उस तत्व को नहीं खोज सकता है। बस एक फ़ंक्शन के अंदर अपना पूरा जेएस कोड डालें, जिसे विंडो लोड होने पर कॉल किया जाएगा।

आप HTML के नीचे अपना जावास्क्रिप्ट कोड भी डाल सकते हैं।

Answer 6

स्क्रिप्ट शरीर से पहले लोड हो रही है, सामग्री के बाद स्क्रिप्ट रखें

Answer 7

बॉडी टैग के अंत में स्क्रिप्ट रखें।

<html>
    <body>
        .........
        <script src="main.js"></script>
    </body>
</html>

Answer 8

उसकी मदद के लिए @Rob एम को धन्यवाद। यह कोड का अंतिम ब्लॉक जैसा दिखता था:

function swapper() {
  toggleClass(document.getElementById('overlay'), 'open');
}

var el = document.getElementById('overlayBtn');
if (el){
  el.addEventListener('click', swapper, false);

  var text = document.getElementById('overlayBtn');
  text.onclick = function(){
    this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
    return false;
  };
}

Answer 9

मैंने बस अपने स्क्रिप्ट टैग में 'async' जोड़ा, जिससे लगता है कि इस मुद्दे को सुलझा लिया गया है। मुझे यकीन नहीं है कि क्यों, अगर कोई समझा सकता है, लेकिन यह मेरे लिए काम करता है। मेरा अनुमान है कि पृष्ठ स्क्रिप्ट के लोड होने की प्रतीक्षा नहीं कर रहा है, इसलिए पृष्ठ उसी समय लोड होता है जब जावास्क्रिप्ट।

Async / Await हमें सिंक्रोनस कोड को सिंक्रोनस फैशन में लिखने में सक्षम बनाता है। यह जनरेटर और उपज बयानों का उपयोग करते हुए "गति" निष्पादन के लिए सिर्फ वाक्यविन्यास चीनी है, जो हमें इसे एक चर में असाइन करने की क्षमता देता है!

यहां देखें संदर्भ लिंक- https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da

Answer 10

मैंने उसी समस्या का सामना किया और अशक्त होने की जाँच की, लेकिन इससे कोई फायदा नहीं हुआ। क्योंकि पेज लोड होने से पहले स्क्रिप्ट लोड हो रही थी। तो बस अंत शरीर टैग से पहले स्क्रिप्ट रखने से समस्या हल हो गई।

Answer 11

जैसा कि दूसरों ने कहा है कि समस्या यह है कि स्क्रिप्ट को पृष्ठ (और विशेष रूप से लक्ष्य तत्व) लोड होने से पहले निष्पादित किया जाता है।

लेकिन मुझे सामग्री को पुन: व्यवस्थित करने का समाधान पसंद नहीं है।

पसंदीदा समाधान पेज ऑनलोड घटना पर एक इवेंट हैंडलर डालना है और वहां श्रोता को सेट करना है। यह पृष्ठ को सुनिश्चित करेगा और असाइनमेंट निष्पादित होने से पहले लक्ष्य तत्व लोड किया गया है। जैसे

    <script>
    function onLoadFunct(){
            // set Listener here, also using suggested test for null
    }
    ....
    </script>

    <body onload="onLoadFunct()" ....>
    .....

Answer 12

मेरे पास नामों के साथ उद्धरणों का एक संग्रह है। मैं किसी विशिष्ट नाम से संबद्ध अंतिम उद्धरण को अपडेट करने के लिए अपडेट बटन का उपयोग कर रहा हूं लेकिन अपडेट बटन पर क्लिक करने पर यह अपडेट नहीं हो रहा है। मैं server.js फ़ाइल और बाहरी js फ़ाइल (main.js) के लिए नीचे कोड शामिल कर रहा हूं।

main.js (बाहरी js)

var update = document.getElementById('update');
if (update){
update.addEventListener('click', function () {

  fetch('quotes', {
  method: 'put',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    'name': 'Muskan',
    'quote': 'I find your lack of faith disturbing.'
  })
})var update = document.getElementById('update');
if (update){
update.addEventListener('click', function () {

  fetch('quotes', {
  method: 'put',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    'name': 'Muskan',
    'quote': 'I find your lack of faith disturbing.'
  })
})
.then(res =>{
    if(res.ok) return res.json()
})
.then(data =>{
    console.log(data);
    window.location.reload(true);
})
})
}

server.js फ़ाइल

app.put('/quotes', (req, res) => {
  db.collection('quotations').findOneAndUpdate({name: 'Vikas'},{
    $set:{
        name: req.body.name,
        quote: req.body.quote
    }
  },{
    sort: {_id: -1},
    upsert: true
  },(err, result) =>{
    if (err) return res.send(err);
    res.send(result);
  })

})

Answer 13

सभी से धन्यवाद, विशिष्ट पृष्ठों में लिपियों को लोड करें जो आप उपयोग करते हैं, सभी पृष्ठों के लिए नहीं, कभी-कभी swiper.js या अन्य पुस्तकालय का उपयोग करके यह इस त्रुटि संदेश का कारण हो सकता है, इस मुद्दे को हल करने का एकमात्र तरीका विशिष्ट पृष्ठों पर JS पुस्तकालय को लोड करना है। वह ID मौजूद है और सभी पृष्ठों में एक ही लाइब्रेरी को लोड करने से रोकती है।

आशा है कि यह आपकी मदद करेगा।

Answer 14

मुझे भी यही समस्या थी, लेकिन मेरी आईडी मौजूद थी। इसलिए मैंने "window.onload = init;" जोड़ने की कोशिश की फिर मैंने अपने मूल जेएस कोड को एक इनिट फ़ंक्शन के साथ लपेटा (जो आप चाहते हैं उसे कॉल करें)। यह काम किया है, इसलिए कम से कम मेरे मामले में, मैं अपने दस्तावेज़ लोड होने से पहले एक घटना श्रोता जोड़ रहा था। यह वही हो सकता है जो आप अनुभव कर रहे हैं।

Answer 15

इसका कारण यह है कि तत्व उस समय लोड नहीं किया गया था जब बंडल जेएस निष्पादित किया जा रहा था।

मैं फ़ाइल <script src="sample.js" type="text/javascript"></script>के बहुत नीचे तक index.htmlजाऊँगा। इस तरह से आप यह सुनिश्चित कर सकते हैं कि सभी HTML तत्वों को पार्स और रेंडर किए जाने के बाद स्क्रिप्ट निष्पादित हो।

Comments

गलत। यह पुरानी स्कूली सोच है। अंत में लोडिंग में देरी होती है, जैसा कि आपने कहा था, लेकिन यह सुनिश्चित नहीं करता है कि DOM पूरी तरह से तैयार है । मेरे पास पुराने पृष्ठ हैं जो इस हैक का उपयोग करने में विफल रहते हैं क्योंकि डोम ड्रॉ लोड की तुलना में धीमा था। यह उत्तर सुनिश्चित करता है कि डोम निष्पादन से पहले तैयार किया गया है।

— Machavity

Answer 16

जब विंडो लोड होती है तो सभी ईवेंट श्रोताओं को जोड़ें। आकर्षण की तरह कोई फर्क नहीं पड़ता कि आप स्क्रिप्ट टैग कहां रखते हैं।

window.addEventListener("load", startup);

function startup() {

  document.getElementById("el").addEventListener("click", myFunc);
  document.getElementById("el2").addEventListener("input", myFunc);

}

myFunc(){}

Comments

पेज की ड्राइंग कभी-कभी स्क्रिप्ट के लोडिंग की तुलना में अधिक समय ले सकती है, इसलिए स्थिति सभी मामलों में महत्वपूर्ण नहीं है। श्रोता को जोड़ना पसंदीदा तरीका है, लेकिन loadउसी कारण से पदावनत भी किया जाता है। DOMContentLoaded एक पसंदीदा तरीका है, क्योंकि यह DOM के पूरी तरह से तैयार होने के बाद ही फायर करता है।

— Machavity

धन्यवाद मैं कोशिश करूंगा। मुझे अपना जवाब मोज़िला नेटवर्क से मिला। मुझे लगा कि यह एक भरोसेमंद स्रोत है।

— नताली जिमेनेज