Die Eigenschaft 'addEventListener' von null kann nicht gelesen werden

Ich habe mit vanilla-JavaScript für ein Projekt. Ich habe ein paar Funktionen, eine davon ist eine Schaltfläche, öffnet sich ein Menü. Es funktioniert auf den Seiten, wo die Ziel-id vorhanden ist, verursacht aber einen Fehler auf den Seiten wo die id nicht vorhanden ist. Auf den Seiten, wo die Funktion nicht finden kann, die id bekomme ich eine "Cannot read property 'addEventListener' von null " Fehler, und keiner von meinen anderen Funktionen arbeiten.

Unten ist der code für die Schaltfläche, öffnet sich das Menü.

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 mit diesem? Muss ich wohl alle wickeln Sie diesen code in einer anderen Funktion, oder verwenden Sie eine if/else-Anweisung, so dass es nur nach der id auf bestimmten Seiten, aber nicht ganz sicher.

InformationsquelleAutor der Frage morocklo | 2014-09-29

98

Ich denke der einfachste Ansatz wäre, zu überprüfen, ob el ist keine null vor dem hinzufügen eines Ereignis-Listeners:
```
var el = document.getElementById('overlayBtn');
if(el){
  el.addEventListener('click', swapper, false);
}
```
InformationsquelleAutor der Antwort Rob M.

Scheint es, dass document.getElementById('overlayBtn'); zurück null weil es ausgeführt wird, bevor der DOM vollständig geladen.

Wenn Sie diese Zeile von code unter

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

dann läuft es ohne Problem.

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

InformationsquelleAutor der Antwort Dilip Agheda

12

Stand ich vor einer ähnlichen situation. Dies ist wahrscheinlich, weil das Skript wird ausgeführt, bevor die Seite geladen wird. Indem Sie das Skript an der Unterseite von der Seite, ich habe das problem umgangen.

InformationsquelleAutor der Antwort sridhar
11

War ich immer die gleichen Fehler, aber die Durchführung einer null-check scheint nicht zu helfen.

Die Lösung, die ich fand, war zu wickeln, meine Funktion in ein Ereignis-listener für das gesamte Dokument zu markieren, wenn das DOM fertig geladen ist.
```
document.addEventListener('DOMContentLoaded', function () {
    el.addEventListener('click', swapper, false);
});
```
Ich denke, das ist weil ich benutze ein framework (Angular) , ändert sich meine HTML-Klassen und-ID ' s dynamisch.

InformationsquelleAutor der Antwort MattSidor

Dank @Rob M. für seine Hilfe. Dies ist, was der Letzte code-block, der aussah wie:

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

InformationsquelleAutor der Antwort morocklo

0

Wie andere gesagt haben, problem ist, das Skript wird ausgeführt, bevor die Seite (insbesondere das target-element) geladen wird.

Aber ich weiß nicht, wie die Lösung der Neuordnung der Inhalte.

Bevorzugte Lösung besteht darin, einen event-handler Seite onload-Ereignis und legen Sie den Hörer gibt. Werden, um die Seite und das Ziel-element geladen wird, bevor die Zuweisung ausgeführt wird. zB
```
    <script>
    function onLoadFunct(){
            //set Listener here, also using suggested test for null
    }
    ....
    </script>

    <body onload="onLoadFunct()" ....>
    .....
```
InformationsquelleAutor der Antwort pjm

Habe ich eine Sammlung von Zitaten, zusammen mit den Namen. Ich bin mit der update-button zu aktualisieren, das Letzte Zitat im Zusammenhang mit einem spezifischen Namen, aber auf Klick auf update-button nicht aktualisieren. Ich bin auch code unten server.js Datei-und externen js-Datei (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 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);
  })

})

InformationsquelleAutor der Antwort Ambreen Fatima

0

Habe ich einfach Hinzugefügt, 'async' zu meinem script-tag, das scheint das Problem behoben wurde. Ich bin mir nicht sicher, warum, wenn jemand erklären kann, aber es funktionierte für mich. Meine Vermutung ist, dass die Seite nicht warten, das Skript zu laden, damit die Seite geladen wird, die zur gleichen Zeit wie das JavaScript.

InformationsquelleAutor der Antwort Andy Smith
-1

Dies ist, weil das element noch nicht geladen wurden, zu der Zeit, wenn das bundle js ausgeführt wurde.

Ich würde verschieben die <script src="sample.js" type="text/javascript"></script> am unteren Ende der index.html - Datei. Auf diese Weise können Sie sicherstellen, dass Skript wird ausgeführt, nachdem alle html-Elemente wurden analysiert und dargestellt .

InformationsquelleAutor der Antwort Xcode

-2

Alle hinzufügen von Ereignis-Listenern, wenn ein Fenster geladen.Funktioniert wie ein Charme, egal, wo Sie script-tags.

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

InformationsquelleAutor der Antwort Natalie Jimenez

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.