Uncaught TypeError: Kann die Eigenschaft 'appendChild' von null nach dem Aufruf von getElementById() nicht lesen

Ich habe gerade angefangen zu lernen JavaScript (richtig: D) und ich habe eine harte Zeit mit dem oben genannten Fehler zu tun. Der Browser, den ich verwende, ist der neueste Google Chrome auf einem Debian Jessie 64bit System. Der Code wird in dem <script/> Tag meiner Seite eingebettet:Uncaught TypeError: Kann die Eigenschaft 'appendChild' von null nach dem Aufruf von getElementById() nicht lesen

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” 
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml”> 
    <head/> 

    <body bgcolor="white"> 
     <p><u>Counter:</u></p> 
     <div id="counter"/> 
     <p><u>Temperature conversion:</u></p> 
     <div id="temperature"/> 
     <script type="text/javascript"> 
      function printRange(_from, _to) { 
       // ... 
      } 

      function fahrenheitToCelsius(fahrenheits) { 
       return 5/9 * (fahrenheits - 32); 
      } 

      document.getElementById("counter").innerHTML = printRange(2,-10); // (1) 

      var fahrenheits = prompt("Enter Fahreheit degrees", 50); 
      var celsius = fahrenheitToCelsius(fahrenheits); 
      var para = document.createElement("p"); 
      para.textContent = fahrenheits + "F = " + celsius + "oC"; 
      document.getElementById("temperature").appendChild(para); // (2) 
     </script> 
    </body> 
</html>

Die document.getElementById("counter") (markiert mit) adaequat ist jedoch die genannten Fehler treten bei document.getElementById("temperature") (markiert mit) auch beide obwohl <div/> s sind im Grunde nacheinander und beide erscheinen vor dem <script/> Tag, wo diese referenziert werden. Ich verstehe, dass der Fehler von kommt, die null zurückbringt, aber ich habe nicht die schwächste Idee, WARUM das Skript die gegebene ID durch diesen Funktionsaufruf nicht finden kann.

Quelle

2016-06-17 rbaleksandar

Sie versuchen, XHTML zu verwenden, aber es ist sehr wahrscheinlich, dass der Browser an, dass und zu interpretieren es als HTML ignoriert. Aus diesem Grund wird die selbstschließende Notation ignoriert. – Pointy

Es gibt nur eine bestimmte Teilmenge von Elementen, die Sie ohne schließendes Tag verwenden können. Dies ist der implizite Anwendungsfall von />. Die Teilmenge ist als "void elements" bekannt.

Als Ergebnis div nicht eines dieser Elemente wird Ihr <div/>-Tag einfach als <div> ohne schließendes Tag gerendert. Die erste document.getElementById("counter").innerHTML = printRange(2,-10); // (1) löscht summarisch den Rest der Seite mit den Ergebnissen des Aufrufs von printRange.

Schließen Sie Ihre Elemente ordnungsgemäß.

<div id="counter"></div>

Quelle

2016-06-17 21:22:12

Oh, wow ... das wusste ich nicht. Danke für die Antwort. Gibt es irgendwo eine Liste nicht schließender Tags? Dies ist eine Art Fehler, der nichts mit meinem JavaScript-Code zu tun hat und etwas frustrierend ist. : D – rbaleksandar

@rbaleksandar - Nun, Tags, die geschlossen werden müssen, wären diejenigen, die nicht in der Liste der void-Elemente sind, zu denen ich einen Link zu oben gehöre (siehe: ["void elements"] (http://w3c.github.io) /html/syntax.html#void-elements)). Die leeren Elemente sind 'Bereich, Basis, Br, Spalte, Einbetten, hr, Img, Eingabe, Keygen, Link, Menüelement, Meta, Parameter, Quelle, Spur, wbr'. –

@rbaleksandar der Mond und die Sterne müssen genau richtig ausgerichtet sein, damit der Browser Ihr Dokument als XHTML behandelt. Obwohl ich akzeptiere, dass es einige gute Anwendungsfälle für XHTML geben könnte, glaube ich nicht, dass es für jeden ist und das Leben ist einfacher, wenn man nur für HTML5 programmiert. – Pointy

technisch selbstschließenden Tags in HTML 4.x nicht zugelassen sind, aber in XHTML erlaubt - könnten Sie versuchen, die div-Tags nicht selbstschließenden?

jsfiddle

<div id="temperature"></div>

Quelle

2016-06-17 21:23:54 kirinthos

Danke für die Antwort. Ich werde @ TravisJ's als das richtige markieren, da es mehr Informationen liefert, aber Sie bekommen +1 von mir für die Mühe. – rbaleksandar

danke für die Abstimmung! – kirinthos

Uncaught TypeError: Kann die Eigenschaft 'appendChild' von null nach dem Aufruf von getElementById() nicht lesen

Antwort

Verwandte Themen