web-dev-qa-db-ja.com

TypeError：document.getElementById（...）is null

GetElementByIdにパラメーターをプッシュしましたが、この「null」エラーはどこから来るのでしょうか？

TypeError: document.getElementById(...) is null
[Break On This Error]   

document.getElementById(elmId).innerHTML = value;

Line 75

これに加えて、これらのプレイリストの写真のいずれかをクリックしないとタイトルと時間が表示されないのはなぜだろうか？

javascriptdomruntime-errorinnerhtmlgetelementbyid
22
Tahtakafa

これらすべての結果はnull：

document.getElementById('volume');
document.getElementById('bytesLoaded');
document.getElementById('startBytes');
document.getElementById('bytesTotal');

次のようにupdateHTMLでnullチェックを行う必要があります。

function updateHTML(elmId, value) {
  var elem = document.getElementById(elmId);
  if(typeof elem !== 'undefined' && elem !== null) {
    elem.innerHTML = value;
  }
}
23
bits

スクリプトが、HEAD要素ではなく、操作しようとしているドキュメントのBODY要素のbottom配置before「取得」したい要素のいずれか。

スクリプトをインポートする場合でも、インラインである場合でも、重要なことは配置です。関数内にコマンドを配置する必要もありません。良い方法ですが、直接呼び出すこともできますが、うまく機能します。

41
Olemak

これは、idがgetElementById()に渡された要素が存在しないことを意味します。

9
Marat Tanalin

使用できます JQuery クライアント側のスクリプト作成を開始する前に、ドキュメントのすべての要素の準備ができていることを確認する

$(document).ready(
    function()
    {
        document.getElementById(elmId).innerHTML = value;
    }
);
8
amar

同じエラーが発生しました。私の場合、同じIDを持つ複数のdivがページにありました。使用するdivの別のIDの名前を変更し、問題を修正しました。

要素が次のことを確認します。

  • iDで存在します
  • iDの重複はありません
  • スクリプトが呼び出されるかどうかを確認します
4
Pradeep Kumar Prabaharan

コードでは、次の関数を見つけることができます。

// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
  document.getElementById(elmId).innerHTML = value;
}

後で、いくつかのパラメーターを使用してこの関数を呼び出します。

updateHTML("videoCurrentTime", secondsToHms(ytplayer.getCurrentTime())+' /');
updateHTML("videoDuration", secondsToHms(ytplayer.getDuration()));
updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
updateHTML("startBytes", ytplayer.getVideoStartBytes());
updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
updateHTML("volume", ytplayer.getVolume());

最初のパラメーターは「getElementById」に使用されますが、IDが「bytesTotal」、「startBytes」、「bytesLoaded」、および「volume」の要素は存在しません。これらはnullを返すため、作成する必要があります。

2
MarcoK

同じ問題があります。 HTMLの要素がロードされる前に、javascriptのスクリプトのロードが速すぎます。ブラウザはnullを返します。ブラウザは、操作したい要素がどこにあるかを見つけることができないためです。

1
The Mr. Totardo