web-dev-qa-db-fra.com

Il indique que TypeError: document.getElementById (...) est null

Bien que j'aie poussé un paramètre vers getElementById, je me demande d'où vient cette erreur "est nulle"?

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

document.getElementById(elmId).innerHTML = value;

Line 75

En plus de cela, je me demande pourquoi le titre et l'heure ne s'affichent que si je clique sur l'une de ces images de playlist?

javascriptdomruntime-errorinnerhtmlgetelementbyid
22
Tahtakafa

Tous ces résultats dans null:

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

Vous devez effectuer une vérification nulle dans updateHTML comme ceci:

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

Assurez-vous que le script est placé dans le bas de l'élément BODY du document que vous essayez de manipuler, pas dans l'élément HEAD ou placé avant l'un des éléments que vous souhaitez "obtenir".

Peu importe que vous importiez le script ou qu'il soit en ligne, l'important est le placement. Vous n'avez pas non plus à placer la commande dans une fonction; bien que ce soit une bonne pratique, vous pouvez simplement l'appeler directement, cela fonctionne très bien.

41
Olemak

Cela signifie que l'élément avec id passé à getElementById() n'existe pas.

9
Marat Tanalin

Vous pouvez utiliser JQuery pour s'assurer que tous les éléments des documents sont prêts avant de commencer le scriptage côté client

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

J'ai eu la même erreur. Dans mon cas, j'avais plusieurs div avec le même identifiant dans une page. J'ai renommé l'autre identifiant de la div utilisée et corrigé le problème.

Confirmez donc si l'élément:

  • existe avec id
  • n'a pas de doublon avec id
  • confirmer si le script est appelé
4
Pradeep Kumar Prabaharan

Dans votre code, vous pouvez trouver cette fonction:

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

Plus tard, vous appelez cette fonction avec plusieurs paramètres:

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());

Le premier paramètre est utilisé pour le "getElementById", mais les éléments avec l'ID "bytesTotal", "startBytes", "bytesLoaded" et "volume" n'existent pas. Vous devrez les créer, car ils renverront null.

2
MarcoK

J'ai le même problème. Il suffit que le script javascript se charge trop rapidement - avant le chargement de l'élément HTML. Ainsi, le navigateur retourne null, car le navigateur ne peut pas trouver où se trouve l'élément que vous souhaitez manipuler.

1
The Mr. Totardo