Warum ist document.getElementById () Rückkehr Wert null, wenn ich weiß, dass die ID existiert?

StackOverflow https://stackoverflow.com/questions/3823063

  •  26-09-2019
  •  | 
  •  

Frage

Ich bin auf einige benutzerdefinierte Javascript für eine CMS-Vorlage bei der Arbeit. Ich möchte in die Lage, nur ein bestimmtes <li> Element auf der Seite erhält die Klasse der „aktuelle“ für die Seite zu machen. So in der globalen Seitenkopf Ich habe so etwas wie folgt aus: 

<script type="text/javascript">
    function makeCurrent(id) {
      var current = document.getElementById(id);
      current.setAttribute("class", "current"); // for most browsers
      current.setAttribute("className", "current"); // for ie
    }
</script>

Dann in jeder einzelnen Seite <head>, ich habe so etwas wie folgt aus: 

<script type="text/javascript">makeCurrent("undergraduate")</script>

Auf der Seite habe ich eine nav <ul>, mit so etwas wie: 

<li id="undergraduate"><a href="...">Undergraduate Program</a></li>
<li id="graduate"><a href="...">Graduate Program</a></li>

etc.

Wenn ich die Seite zu laden, wird die Klasse nicht angewandt. Als ich in der Firebug-Konsole suchen, gibt es die Fehlermeldung: 

current is null
(x)  current.setAttribute("class", "current");

Ich bin immer noch den Dreh zu schreiben fest, roh Javascript bekommen (Lernen rückwärts nach jQuery, wissen Sie, wie es geht), aber ich will es in nur JS schreiben. Was idiotisch Neuling Fehler mache ich?

Danke an alle!

War es hilfreich?

Lösung

Das Element existiert nicht noch, wenn das Skript ausgewertet wird. Legen Sie es in dem onload-Handler oder etwas Körpers statt, so dass es einmal führt der DOM vorhanden ist.

Ein Beispiel dafür, wie dies zu tun, ohne eine Markup zu berühren: 

function callWhenLoaded(func) {
  if (window.addEventListener) {
    window.addEventListener("load", func, false);
  } else if (window.attachEvent) {
    window.attachEvent("onload", func);
  }
}

callWhenLoaded(function() { makeCurrent("undergraduate"); });

Andere Tipps

Wenn Sie das Javascript ausgeführt werden, bevor der DOM-Baum fertig geladen hat, wird es null zurück. So eine Idee wäre, um die Funktion aufzurufen ganz am Ende, bevor Sie den Body-Tag schließen.

Dies ist, warum die meisten JavaScript-Bibliotheken Unterstützung haben für ein dom-ready-Ereignis, moderner Browser hat dies auch (DOMContentLoaded) jedoch für breite Browser-Unterstützung ist es ein wenig schwieriger, es selbst zu tun (na ja, nicht so schwierig, 3 oder 4 verschiedene Möglichkeiten, denke ich.)

Das DOM ist nicht vollständig geladen, wenn Sie makeCurrent in Ihrem Kopf laufen. Sie sollten das Skript setzen nach Ihre <li> Tags.

kann Ihr Code optimiert werden. Sie class Attribut direkt mit current.className = 'current'; einstellen

Der Grund dafür ist, dass Ihr Skript ausgeführt wird, bevor das Laden der Seite abgeschlossen ist, und daher vor dem DOM bevölkert wird.

Sie müssen sicherstellen, dass Sie nur die Funktion aufrufen, nachdem Laden der Seite abgeschlossen ist. Tun Sie dies, indem Sie es document.onload () oder ein Onload-Ereignis auf dem Body-Tag ausgelöst wird.

Nachdem alle die technischen Antworten wurden bereits ausgespuckt worden ist, werde ich alle, die überspringen, die es könnte sehr gut sein und für einige der offensichtlichen gehe ich in die veranlaßte mich, wenn ich auf facepalm gelaufen haben ‚ve realisiert:

  • Typo in der Identität
  • Die Identität ist nicht das, was Sie denken, es ist, weil es erzeugt wird, oder teilweise von der Web-Framework erzeugt man also in ASP.NET verwenden Sie die Client-ID „MyControl“ gesetzt konnte nur, dass durch die Zeit zu finden, es ist die "PAGE_1 $ Control_0 $ MyControl $ 1" in dem Client gerendert
  • Sie haben es mit einem # in einem oder mehreren der falschen Orten vorangestellt, zum Beispiel, obwohl Sie nicht jQuery in Ihrem Beispiel zu verwenden, wenn das Objekt-ID ist MyControl, in jQuery und CSS Sie verweisen sie #MyControl mit , aber in der tatsächlichen ID des Objekts, du hast verwenden # nicht. In document.getElementById () Sie nicht verwenden, um ein #, wie Sie es in jQuery und CSS, aber Sie es versehentlich verwendet haben.
  • Sie haben den Namen Element in der Steuerung anstelle der ID gesetzt.

Wie andere Menschen aber schon erwähnt haben, könnte es sein, bis nicht warten, bis das Element zu dem Zeitpunkt verfügbar sein, Sie wird es verweisen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top