Uncaught TypeError：getElementById（）を呼び出した後にnullの 'appendChild'プロパティを読み取ることができません。

JavaScriptを学習し始めたばかり（正しくはD）、上記のエラーを処理するのに苦労しています。私が使っているブラウザは、Debian Jessie 64bitシステムの最新のGoogle Chromeです。（印）Uncaught TypeError：getElementById（）を呼び出した後にnullの 'appendChild'プロパティを読み取ることができません。

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

document.getElementById("counter")が正常に動作しているが言及もエラーが両方<div/> Sものの（印）document.getElementById("temperature")で発生します。コードは、私のページの<script/>タグ内に埋め込まれています基本的に1つずつあり、両方とも参照されている<script/>タグの前に表示されます。私はこのエラーがnullを返すdocument.getElementById("temperature")から来ていることを理解していますが、この関数呼び出しでスクリプトが指定されたIDを見つけることができないという賢明な考えはありません。

出典

2016-06-17 rbaleksandar

あなたはXHTMLを使用しようとしているが、それは、ブラウザがそれを無視し、HTMLとして解釈される可能性が非常に高いです。そのため、自己クローズ表記は無視されます。 – Pointy

閉じるタグなしで使用できる要素の特定のサブセットのみが存在します。これは暗黙のユースケース/>です。サブセットは"void elements"として知られています。

divがこれらの要素ではないため、<div/>タグは、終了タグなしで単に<div>と表示されます。最初のdocument.getElementById("counter").innerHTML = printRange(2,-10); // (1)は、printRangeの呼び出しの結果でページの残りの部分を一掃します。

要素を適切に閉じます。

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

出典

2016-06-17 21:22:12

ああ、うわー...私はそれを知らなかった。答えてくれてありがとう。どこかに非クローズタグのリストはありますか？これは私のJavaScriptコードとは何の関係もないエラーのようなものですが、ちょっとイライラしています。：D – rbaleksandar

@rbaleksandar - 閉鎖を必要とするタグは、void要素のリストにないものです。これには上記のリンクが含まれています（["void elements"]（http://w3c.github.io /html/syntax.html#void-elements））。 void要素は 'area、base、br、col、embed、hr、img、input、keygen、link、menuitem、meta、param、source、track、wbr'です。 –

@rbaleksandarブラウザがドキュメントをXHTMLとして扱うためには、月と星がちょうど並んでいなければなりません。私はXHTMLの良いユースケースがあるかもしれないと受け入れていますが、HTML5をコーディングするだけであれば、それはみんなにとってだとは思っていません。 – Pointy

は、技術的に自己終了タグはHTML 4.xで禁止されているが、XHTMLに許可されている - あなたは自動閉鎖divタグを試みることができるではありませんか？

jsfiddle

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

出典

2016-06-17 21:23:54 kirinthos

答えをありがとう。私は@ TravisJを正しいものとしてマークします。なぜなら、それはより多くの情報を提供しますが、あなたは私の努力のために+1を得るからです。 – rbaleksandar

投票ありがとう！ – kirinthos

Uncaught TypeError：getElementById（）を呼び出した後にnullの 'appendChild'プロパティを読み取ることができません。

答えて

関連する問題