javascript - Dice que TypeError: document.getElementById(...) es nulo

getelementbyid null

Question

Tengo una página de demostración . Aunque puse un parámetro en getElementById, me pregunto de dónde viene este error "is null". Firebug da este error cuando uno hace clic en las imágenes de la lista de reproducción debajo del reproductor. Además, el error no ocurrió solo una vez, sino que repetía miles y miles de veces cuando dejaba la página abierta.

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

document.getElementById(elmId).innerHTML = value;

Line 75  

Además de esto, me pregunto por qué el título y el tiempo no se muestran a menos que haga clic en una de estas imágenes de la lista de reproducción.

Answer 1

Asegúrese de que el script se coloque en la parte inferior del elemento BODY del documento que está tratando de manipular, no en el elemento HEAD o colocado antes de cualquiera de los elementos que desea "obtener".

No importa si importa el script o si está en línea, lo importante es la ubicación. No tiene que poner el comando dentro de una función tampoco; Si bien es una buena práctica, puedes simplemente llamarlo directamente, funciona bien.

Answer 2

En tu código, puedes encontrar esta función:

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

Más tarde, llama a esta función con varios params:

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

El primer parámetro se usa para "getElementById", pero los elementos con ID "bytesTotal", "startBytes", "bytesLoaded" y "volume" no existen. Tendrá que crearlos, ya que devolverán nulo.

Answer 3

Puede usar JQuery para asegurarse de que todos los elementos de los documentos estén listos antes de que comience la creación de scripts en el lado del cliente.

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

Answer 4

Significa que el elemento con id pasado a getElementById() no existe.

Answer 5

Tengo el mismo error. En mi caso, tenía varios div con la misma identificación en una página. Cambié el nombre de la otra identificación del div usado y solucioné el problema.

Confirme si el elemento:

• existe con id
• no tiene duplicado con id
• confirmar si el script se llama

Answer 6

Todos estos resultados en null :

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

Necesitas hacer una comprobación nula en updateHTML así:

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

Answer 7

Yo tengo el mismo problema. Simplemente la secuencia de comandos de javascript se carga demasiado rápido, antes de que se cargue el elemento HTML. Entonces el navegador devuelve nulo, ya que el navegador no puede encontrar dónde está el elemento que te gusta manipular.