নালীর সম্পত্তি 'অ্যাডএভেন্টলিস্টনার' পড়তে পারে না

Question 1

আমাকে একটি প্রকল্পের জন্য ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। আমার কয়েকটি ফাংশন রয়েছে যার মধ্যে একটি হল একটি বোতাম যা একটি মেনু খোলে। এটি সেই পৃষ্ঠাগুলিতে কাজ করে যেখানে লক্ষ্য আইডিটি উপস্থিত থাকে তবে যেখানে পৃষ্ঠাগুলি আইডিটি উপস্থিত নেই সেখানে ত্রুটি ঘটায়। সেই পৃষ্ঠাগুলিতে যেখানে ফাংশনটি আইডিটি সন্ধান করতে পারে না, আমি ত্রুটিটি পেয়েছি "নালীর সম্পত্তি 'অ্যাডএভেন্টলিস্টনার' পড়তে পারি না" এবং আমার অন্য কোনও ফাংশন কাজ করে না।

নীচে মেনুটি খোলার বোতামটির কোড রয়েছে।

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;
};

আমি কীভাবে এটি মোকাবেলা করব? আমার সম্ভবত এই কোডটি অন্য কোনও ফাংশনে মোড়ানো বা একটি / অন্য বিবৃতি ব্যবহার করা দরকার যাতে এটি কেবল নির্দিষ্ট পৃষ্ঠাগুলিতে আইডি অনুসন্ধান করে, তবে ঠিক নিশ্চিত নয় not

Question 2

আমি মনে করি সহজ elশ্রোতা হ'ল কোনও ইভেন্ট শ্রোতা যুক্ত করার আগে কেবল এটি বাতিল নয় যাচাই করা হবে :

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

Question 3

দেখে মনে হচ্ছে document.getElementById('overlayBtn');এটি ফিরে আসছে nullকারণ এটি ডিওএমের পুরোপুরি লোড হওয়ার আগেই কার্যকর করে।

আপনি যদি কোডের এই লাইনটি রাখেন

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>");
}

Question 4

আমিও একইরকম পরিস্থিতির মুখোমুখি হয়েছি। স্ক্রিপ্টটি পৃষ্ঠা লোড হওয়ার আগেই সম্পাদিত হওয়ার কারণ এটি সম্ভবত। পৃষ্ঠার নীচে স্ক্রিপ্টটি রেখে, আমি সমস্যাটি ছড়িয়ে দিয়েছি।

Question 5

আমি একই ত্রুটি পেয়েছিলাম, কিন্তু নাল চেক করা কোনওরকম সাহায্য করবে বলে মনে হচ্ছে না।

আমি যে সমাধানটি পেয়েছি তা হ'ল ডিওএম লোডিং শেষ হয়ে গেছে কিনা তা পরীক্ষা করে পুরো দস্তাবেজের জন্য একটি ইভেন্ট শ্রোতার ভিতরে আমার ফাংশনটি মোড়ানো।

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

আমি মনে করি এটি কারণ আমি একটি ফ্রেমওয়ার্ক (কৌণিক) ব্যবহার করছি যা আমার এইচটিএমএল ক্লাস এবং আইডি'র পরিবর্তনশীল পরিবর্তন করছে।

Question 6

এটি কেবলমাত্র বিসিজেড হ'ল এইচটিএমএল অংশের আগে আপনার জেএস লোড হয়ে যায় এবং যাতে এটি উপাদান খুঁজে পায় না। কেবলমাত্র আপনার পুরো জেএস কোডটি কোনও ফাংশনের ভিতরে রাখুন যা উইন্ডোটি লোড হয়ে গেলে ডাকা হবে।

আপনি আপনার জাভাস্ক্রিপ্ট কোডটি এইচটিএমএলের নীচেও রাখতে পারেন।

Question 7

স্ক্রিপ্ট শরীরের আগে লোড হচ্ছে, সামগ্রীর পরে স্ক্রিপ্ট রাখুন

Question 8

বডি ট্যাগের শেষে স্ক্রিপ্টটি রাখুন।

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

Question 9

Thanks to @Rob M. for his help. This is what the final block of code looked like:

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;
  };
}

Question 10

I simply added 'async' to my script tag, which seems to have fixed the issue. I'm not sure why, if someone can explain, but it worked for me. My guess is that the page isn't waiting for the script to load, so the page loads at the same time as the JavaScript.

Async/Await enables us to write asynchronous code in a synchronous fashion. it’s just syntactic sugar using generators and yield statements to “pause” execution, giving us the ability to assign it to a variable!

Here's reference link- https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da

Question 11

I encountered the same problem and checked for null but it did not help. Because the script was loading before page load. So just by placing the script before the end body tag solved the problem.

Question 12

As others have said problem is that script is executed before the page (and in particular the target element) is loaded.

But I don't like the solution of reordering the content.

Preferred solution is to put an event handler on page onload event and set the Listener there. That will ensure the page and the target element is loaded before the assignment is executed. eg

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

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

Question 13

I've a collection of quotes along with names. I'm using update button to update the last quote associated with a specific name but on clicking update button it's not updating. I'm including code below for server.js file and external js file (main.js).

main.js (external 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 file

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);
  })

})

Question 14

Thanks from all, Load the Scripts in specific pages that you use, not for all pages, sometimes using swiper.js or other library it may cause this error message, the only way to solve this issue it to load the JS library on specific pages that ID is exist and prevent loading of the same library in all pages.

Hope this help you.

Question 15

I had the same problem, but my id was present. So I tried adding "window.onload = init;" Then I wrapped my original JS code with an init function (call it what you want). This worked, so at least in my case, I was adding an event listener before my document loaded. This could be what you are experiencing as well.

Question 16

This is because the element hadn't been loaded at the time when the bundle js was being executed.

I'd move the <script src="sample.js" type="text/javascript"></script> to the very bottom of the index.html file. This way you can ensure script is executed after all the html elements have been parsed and rendered .

Question 17

Add all event listeners when a window loads.Works like a charm no matter where you put script tags.

window.addEventListener("load", startup);

function startup() {

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

}

myFunc(){}