it-swarm.com.de

Die Eigenschaft 'addEventListener' von null kann nicht gelesen werden

Ich muss Vanilla JavaScript für ein Projekt verwenden. Ich habe einige Funktionen, von denen eine eine Schaltfläche ist, die ein Menü öffnet. Es funktioniert auf Seiten, auf denen die Ziel-ID vorhanden ist, verursacht jedoch einen Fehler auf Seiten, auf denen die ID nicht vorhanden ist. Auf den Seiten, auf denen die Funktion die ID nicht finden kann, erhalte ich die Fehlermeldung "Die Eigenschaft 'addEventListener' kann nicht gelesen werden" und keine meiner anderen Funktionen funktioniert.

Unten ist der Code für die Schaltfläche, mit der das Menü geöffnet wird. 

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

Wie gehe ich damit um? Ich muss diesen Code wahrscheinlich alle in eine andere Funktion einbetten oder eine if/else -Anweisung verwenden, damit er nur auf bestimmten Seiten nach der ID sucht, aber nicht genau weiß. 

57
morocklo

Ich denke, der einfachste Ansatz wäre, einfach zu überprüfen, dass el nicht null ist, bevor ein Ereignis-Listener hinzugefügt wird:

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

Es scheint, dass document.getElementById('overlayBtn');null zurückgibt, da es ausgeführt wird, bevor das DOM vollständig geladen wird.

Wenn Sie diese Codezeile unter einfügen

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

dann wird es ohne problem laufen.

Beispiel:

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

Ich war in einer ähnlichen Situation. Dies liegt wahrscheinlich daran, dass das Skript ausgeführt wird, bevor die Seite geladen wird. Durch das Platzieren des Skripts am Ende der Seite habe ich das Problem umgangen.

15
sridhar

Ich habe die gleiche Fehlermeldung erhalten, aber die Nullprüfung schien nicht zu helfen.

Die Lösung, die ich fand, bestand darin, meine Funktion in einem Ereignis-Listener für das gesamte Dokument einzuhüllen, um zu überprüfen, wann das Laden des DOM abgeschlossen ist.

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

Ich denke, das liegt daran, dass ich ein Framework (Angular) verwende, das meine HTML-Klassen und IDs dynamisch ändert.

11
MattSidor

Danke an @Rob M. für seine Hilfe. So sah der letzte Codeblock aus:

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

Es ist nur so, dass Ihr JS vor dem HTML-Teil geladen wird und dieses Element nicht gefunden wird. Setzen Sie einfach Ihren gesamten JS-Code in eine Funktion, die aufgerufen wird, wenn das Fenster geladen wird.

Sie können Ihren Javascript-Code auch unter dem HTML-Code einfügen.

1
Ajit Kumar

Ich habe einfach "async" zu meinem Skript-Tag hinzugefügt, was das Problem offenbar behoben hat. Ich weiß nicht warum, ob jemand es erklären kann, aber es hat für mich funktioniert. Meine Vermutung ist, dass die Seite nicht auf das Laden des Skripts wartet, sodass die Seite zur gleichen Zeit wie das JavaScript geladen wird.

Async/Await ermöglicht es uns, asynchronen Code synchron zu schreiben. Es ist nur syntaktischer Zucker, der Generatoren und Ertragsaussagen verwendet, um die Ausführung zu „pausieren“, sodass wir sie einer Variablen zuweisen können.

Hier Verweis link- https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da

1
Andy Smith

Wie bereits erwähnt, besteht das Problem darin, dass das Skript ausgeführt wird, bevor die Seite (und insbesondere das Zielelement) geladen wird.

Aber ich mag die Lösung nicht, den Inhalt neu zu ordnen.

Die bevorzugte Lösung besteht darin, einen Event-Handler auf das Onload-Event der Seite zu setzen und den Listener dort festzulegen. Dadurch wird sichergestellt, dass die Seite und das Zielelement geladen werden, bevor die Zuweisung ausgeführt wird. z.B

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

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

Ich habe eine Sammlung von Zitaten mit Namen. Ich verwende die Aktualisierungsschaltfläche zum Aktualisieren des letzten Angebots, das mit einem bestimmten Namen verknüpft ist. Wenn Sie jedoch auf die Aktualisierungsschaltfläche klicken, wird es nicht aktualisiert. Ich füge folgenden Code für die server.js-Datei und die externe js-Datei (main.js) ein.

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-Datei

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

})
0
Ambreen Fatima