Kan eigenschap ‘addEventListener’ van null niet lezen

December 7, 2021

Ik moet vanilla JavaScript gebruiken voor een project. Ik heb een paar functies, waaronder een knop die een menu opent. Het werkt op pagina’s waar het doel-ID bestaat, maar veroorzaakt een fout op pagina’s waar het ID niet bestaat. Op die pagina’s waar de functie de id niet kan vinden, ontvang ik de foutmelding “Kan eigenschap ‘addEventListener’ of null niet lezen” en geen van mijn andere functies werkt.

Hieronder staat de code voor de knop waarmee het menu wordt geopend.

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

Hoe ga ik hiermee om? Ik moet deze code waarschijnlijk allemaal in een andere functie verpakken of een if/else-statement gebruiken, zodat het alleen naar de id op specifieke pagina’s zoekt, maar ik weet het niet precies.

Antwoord 1, autoriteit 100%

Ik denk dat de gemakkelijkste benadering zou zijn om gewoon te controleren of elniet null is voordat je een gebeurtenislistener toevoegt:

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

Antwoord 2, autoriteit 60%

Het lijkt erop dat document.getElementById('overlayBtn');nullretourneert omdat het wordt uitgevoerd voordat de DOM volledig is geladen.

Als u deze regel code onder

. plaatst

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

dan werkt het zonder problemen.

Voorbeeld:

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

Antwoord 3, autoriteit 16%

Ik heb een soortgelijke situatie meegemaakt. Dit komt waarschijnlijk omdat het script wordt uitgevoerd voordat de pagina wordt geladen. Door het script onderaan de pagina te plaatsen, heb ik het probleem omzeild.

Antwoord 4, autoriteit 7%

script laadt voor body, bewaar script na body

Antwoord 5, autoriteit 7%

Ik kreeg dezelfde foutmelding, maar het uitvoeren van een nulcontrole leek niet te helpen.

De oplossing die ik vond was om mijn functie in een gebeurtenislistener te stoppen zodat het hele document kon controleren wanneer de DOM klaar was met laden.

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

Ik denk dat dit komt omdat ik een framework (Angular) gebruik dat mijn HTML-klassen en ID’s dynamisch verandert.

Antwoord 6, autoriteit 5%

Zet script aan het einde van de body-tag.

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

Antwoord 7, autoriteit 4%

Het is alleen zo dat je JS vóór het HTML-gedeelte wordt geladen en dus dat element niet kan vinden. Plaats gewoon je hele JS-code in een functie die wordt aangeroepen wanneer het venster wordt geladen.

U kunt uw Javascript-code ook onder de html plaatsen.

Antwoord 8, autoriteit 2%

Met dank aan @Rob M. voor zijn hulp. Zo zag het laatste codeblok eruit:

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

Antwoord 9

Ik had hetzelfde probleem, maar mijn id was aanwezig. Dus ik probeerde “window.onload = init;” toe te voegen. Toen heb ik mijn originele JS-code ingepakt met een init-functie (noem het zoals je wilt). Dit werkte, dus in mijn geval was ik tenminste een gebeurtenislistener aan het toevoegen voordat mijn document werd geladen. Dit kan ook zijn wat jij ervaart.

Antwoord 10

Gebruik deze manier als uw js-code het externe bestand is:

<script src="filename.js" defer></script>

Als uw code het interne bestand is, gebruikt u DOMContentLoaded

Twee manieren hierboven zorgen ervoor dat DOM volledig wordt geladen voordat js-code wordt uitgevoerd!

Antwoord 11

Ik kwam hetzelfde probleem tegen en controleerde op null, maar het hielp niet. Omdat het script werd geladen voordat de pagina werd geladen. Dus gewoon door het script voor de end body tag te plaatsen loste het probleem op.

Antwoord 12

Uw script is waarschijnlijk in de head-tag van HTML geplaatst en wordt geladen voordat de DOM wordt geladen. Hier kunnen twee oplossingen voor zijn:

Plaats de scripttag net voor de afsluitende body-tag (</body>).
Voeg het trefwoord asynctoe aan uw scripttag.

script async src=”script.js”></script

Opmerking: StackOverflow staat om veiligheidsredenen niet toe om hier scripttagcode toe te voegen. Voeg haakjes openen en sluiten toe aan de bovenstaande code.

Met asyncwordt het bestand asynchroon gedownload en uitgevoerd zodra het is gedownload.

Ik geef de voorkeur aan 2e optie beter. Lees meer over async en uitstel hier

Antwoord 13

Ik heb eenvoudig ‘async’ toegevoegd aan mijn scripttag, waarmee het probleem lijkt te zijn opgelost. Ik weet niet zeker waarom, als iemand het kan uitleggen, maar het werkte voor mij. Ik vermoed dat de pagina niet wacht op het laden van het script, dus de pagina laadt tegelijkertijd met het JavaScript.

Async/Await stelt ons in staat om asynchrone code op een synchrone manier te schrijven. het is gewoon syntactische suiker die generatoren en opbrengstverklaringen gebruikt om de uitvoering te “pauzeren”, waardoor we het aan een variabele kunnen toewijzen!

Hier is de referentielink- https://medium.com/siliconwat /how-javascript-async-wait-works-3cab4b7d21da

Antwoord 14

Deze vraag heeft al een antwoord, maar wat ik graag doe voor die eenvoudige voorwaarden is het gebruik van de logische AND (&&) operator :

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

Naar mijn mening leesbaarder en beknopter.

Antwoord 15

Zoals anderen al hebben gezegd, is het probleem dat het script wordt uitgevoerd voordat de pagina (en in het bijzonder het doelelement) wordt geladen.

Maar ik hou niet van de oplossing om de inhoud opnieuw te ordenen.

Voorkeursoplossing is om een gebeurtenis-handler op de pagina-onload-gebeurtenis te plaatsen en de luisteraar daar in te stellen. Dat zorgt ervoor dat de pagina en het doelelement worden geladen voordat de opdracht wordt uitgevoerd. bijv.

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

Antwoord 16

Ik heb een verzameling citaten en namen. Ik gebruik de update-knop om de laatste quote bij te werken die aan een specifieke naam is gekoppeld, maar als ik op de update-knop klik, wordt deze niet bijgewerkt. Ik voeg onderstaande code toe voor het server.js-bestand en het externe js-bestand (main.js).

main.js (externe 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-bestand

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

Antwoord 17

Dit komt omdat het element niet was geladen op het moment dat de bundel js werd uitgevoerd.

Ik zou de <script src="sample.js" type="text/javascript"></script>helemaal onderaan de index.html-bestand. Op deze manier kunt u ervoor zorgen dat het script wordt uitgevoerd nadat alle html-elementen zijn geparseerd en weergegeven.

Antwoord 18

Voeg alle gebeurtenislisteners toe wanneer een venster wordt geladen. Werkt als een zonnetje, waar u scripttags ook plaatst.

window.addEventListener("load", startup);
function startup() {
  document.getElementById("el").addEventListener("click", myFunc);
  document.getElementById("el2").addEventListener("input", myFunc);
}
myFunc(){}

Previous articlePanda-serie converteren naar DataFrame

Next articleVisual Studio toont C++ ambiguïteitsfouten na toevoeging van if-statement