No se puede establecer la propiedad 'innerHTML' de nulo

97

¿Por qué obtengo un error o Error de tipo no detectado: no se puede establecer la propiedad 'innerHTML' de nulo? Pensé que entendía innerHTML y lo tenía funcionando antes.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

</head>

<body>
<div id="hello"></div>
</body>
</html>
javascript onload innerhtml Joshua W
fuente

Respuestas:

170

Debe colocar el hellodiv antes del script, para que exista cuando se cargue el script.

Erik Godard
fuente
17
Si usa window.onload = function name () {} no importa si el div es antes o después.
Colyn1337
1
Solución crujiente. Pero sigo recibiendo el error. En chrome / fedora 25 / apache
Sahu V Kumar
48

Primero intentemos comprender la causa raíz de por qué está sucediendo en primer lugar.

¿Por qué obtengo un error o TypeError no detectado: no se puede establecer la propiedad 'innerHTML' de nulo?

El navegador siempre carga todo el DOM HTML de arriba a abajo. Cualquier código JavaScript escrito dentro de las scriptetiquetas (presente en la headsección de su archivo HTML) es ejecutado por el motor de renderizado del navegador incluso antes de que se cargue todo su DOM (varias etiquetas de elementos HTML presentes en la etiqueta del cuerpo). Los scripts presentes en la headetiqueta intentan acceder a un elemento que tiene id helloincluso antes de que se haya procesado en el DOM. Entonces, obviamente, JavaScript no pudo ver el elemento y, por lo tanto, terminará viendo el error de referencia nula.

¿Cómo puedes hacer que funcione como antes?

Desea mostrar el mensaje "hola" en la página tan pronto como el usuario llegue a su página por primera vez. Por lo tanto, debe conectar su código en un punto en el que esté completamente seguro del hecho de que DOM está completamente cargado y el helloelemento id es accesible / disponible. Se puede lograr de dos formas:

  1. Reordene sus scripts : de esta manera, sus scripts se activan solo después de que el DOM que contiene su helloelemento de identificación ya esté cargado. Puede lograrlo simplemente moviendo la etiqueta del script después de todos los elementos DOM, es decir, en la parte inferior donde bodytermina la etiqueta. Dado que la renderización ocurre de arriba a abajo, sus scripts se ejecutan al final y no enfrenta ningún error.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div id="hello"></div>
    
    <script type ="text/javascript">
        what();
        function what(){
            document.getElementById('hello').innerHTML = 'hi';
        };
    </script>
    </body>
    </html>
Expandir fragmento

  1. Utilice el enlace de eventos : el motor de renderizado del navegador proporciona un enlace de eventos basado en window.onloadeventos que le da la pista de que el navegador ha terminado de cargar el DOM. Entonces, para cuando se active este evento, puede estar seguro de que su elemento con la helloidentificación ya cargada en el DOM y cualquier JavaScript activado a partir de entonces que intente acceder a este elemento no fallará. Entonces haces algo como el siguiente fragmento de código. Tenga en cuenta que en este caso, su secuencia de comandos funciona aunque esté presente en la parte superior de su documento HTML dentro de la headetiqueta.

<!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type ="text/javascript">
            window.onload = function() {
            what();
            function what(){
                document.getElementById('hello').innerHTML = 'hi';
            };
        }
        </script>
        </head>
        
        <body>
        <div id="hello"></div>
        </body>
        </html>
Expandir fragmento

RBT
fuente
Cosas buenas, pero agregaría, no creo que la función que hace document.getElementById (..). InnerHTML. debe colocarse dentro de la carga. Como eso se puede cargar antes de que se cargue el DOM y no hay error. Solo su llamada necesita ser. jsfiddle.net/fbz6wLpd/8
barlop
40

Podrías decirle a javascript que realice la acción "onload" ... Prueba con esto:

<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
Colyn1337
fuente
11

Solo pon tu JS en window.onload

window.onload = function() {

        what();

        function what() {
            document.getElementById('hello').innerHTML = 'hi';
        };

    }
RIYAJ KHAN
fuente
7

La parte de JavaScript debe ejecutarse una vez que se carga la página, por lo que se recomienda colocar el script de JavaScript al final de la etiqueta del cuerpo.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>  
</body>
</html>
Expandir fragmento

usuario5323957
fuente
2
¿Dejará de usar mayúsculas en cada palabra que escriba?
VortexYT
6

Javascript se ve bien. Intente ejecutarlo después de que se haya cargado el div. Intente ejecutar solo cuando el documento esté listo. $(document).readyen jquery.

JT Nolan
fuente
1
También el atributo de tipo en las etiquetas de script está obsoleto.
JT Nolan
2
e importar jquery para resolver esto es excesivo a menos que planee usarlo para este proyecto de aquí en adelante. window.onloadpuede ser suficiente, pero también hay otros eventos disponibles. window
Consulte
5 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = '<p>hi</p>';
    };
</script>  
</body>
</html>
Expandir fragmento

usuario6175882
fuente
Su respuesta es correcta, pero puedo solicitarle que agregue algo de contexto en torno a su código fuente. Las respuestas de solo código son difíciles de entender. Ayudará tanto al autor de la pregunta como a los futuros lectores si puede agregar más información en su publicación.
RBT
3

Aquí está mi fragmento, pruébalo. Espero que te sea de ayuda. 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
  
<div id="hello"></div>
  
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>
Expandir fragmento


fuente
3

Puede intentar usar el método setTimeout para asegurarse de que su html se cargue primero.

Remolino
fuente
3

La causa principal es: HTML en una página tiene que cargarse antes del código JavaScript . Resolviendo de 2 formas:

1) Permita la carga de HTML antes del código js.

<script type ="text/javascript">
    window.onload = function what(){
        document.getElementById('hello').innerHTML = 'hi';
    }
</script>

//or set time out like this:
<script type ="text/javascript">
    setTimeout(function(){
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
    }, 50);
    //NOTE: 50 is milisecond.
</script>

2) Mover el código js debajo del código HTML

<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
Pines Tran
fuente
1 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>
Expandir fragmento

usuario2114253
fuente
el problema es el primer div html cargado ... que la función de script java llamando ahora funciona ...
user2114253
1

He tenido el mismo problema y resulta que el error nulo se debió a que no había guardado el html con el que estaba trabajando.

Si el elemento al que se hace referencia no se ha guardado una vez cargada la página es 'nulo', porque el documento no lo contiene en el momento de la carga. El uso de window.onload también ayuda a depurar.

Espero que esto te haya sido útil.

plagaanomicPlaga
fuente
1

Este error puede aparecer incluso si carga su secuencia de comandos una vez finalizada la renderización html. En este ejemplo dado, su código

<div id="hello"></div>

no tiene ningún valor dentro del div. Entonces se genera el error, porque no hay ningún valor que cambiar dentro. Debería haber sido

<div id="hello">Some random text to change</div>

entonces.

Marko Slijepčević
fuente
0

Agregar jquery en < head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Use $ document.ready () : el código puede estar en < head>o en un archivo separado como main.js

1) usando js en el mismo archivo (agregue esto en < head>):

<script>
$( document ).ready(function() {
function what(){
    document.getElementById('hello').innerHTML = 'hi';
};
});
</script>

2) usando algún otro archivo como main.js (agregue esto en < head>):

<script type="text/javascript" src="/path/to/main.js" charset="utf-8"></script>

y agregue el código en el archivo main.js :)

abe312
fuente
0

Necesitas cambiarte diva p. Técnicamente innerHTML significa que está dentro de la <??? id=""></???>pieza.

Cambio:

<div id="hello"></div>

dentro

<p id="hello"></p>

Haciendo:

document.getElementById('hello').innerHTML = 'hi';

girará 

<div id="hello"></div> into this <div id="hello">hi</div>

que en realidad no tiene sentido.

También puede intentar cambiar:

document.getElementById('hello').innerHTML = 'hi';

dentro de esto 

document.getElementById('hello').innerHTML='<p> hi </p> ';

para que funcione.

usuario6175882
fuente
0

El error se explica por sí mismo, no obtiene la etiqueta HTML en la que desea configurar los datos. Por lo tanto, haga que la etiqueta esté disponible para JS, entonces solo usted puede configurar los datos para eso.

Shubham
fuente
0

Sin duda, la mayoría de las respuestas aquí son correctas, pero también puede hacer esto:

document.addEventListener('DOMContentLoaded', function what() {
   document.getElementById('hello').innerHTML = 'hi';  
});
Shrey Tripathi
fuente
0

Hay diferentes causas posibles, como se discutió, solo me gustaría agregar esto para alguien que podría tener el mismo problema que el mío.

En mi caso, me faltaba un div cerrado como se muestra a continuación

   <!DOCTYPE HTML>
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   </head>
   <body>
   <div> //I am an open div
    <div id="hello"></div>
   <script type ="text/javascript">
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
   </script>
   </body>
   </html>

La falta de un div cercano puede resultar en la desorganización de la transversal de hijo a padre o de padre a hijo, lo que resulta en un error cuando intenta acceder a un elemento en el DOM

Proxybee
fuente
Responda según el ejemplo de OP.
mishsx
@mishsx el motivo de mi respuesta: tuve exactamente el mismo error y cuando busqué vi las correcciones de todos, pero no era la solución en mi propio caso, hacer la misma pregunta sería duplicar, sentí que alguien más podría estar en el exacto la misma situación también y decidí publicar mi propio error y corregirlo como una respuesta ... como puede ver, se indica claramente en la respuesta, por lo tanto, será útil para aquellos en la misma situación exacta y, sin embargo, quedará claro para los demás que esto no es No es la solución al error en la pregunta. Si esto no está bien, tenga la amabilidad de recibir un consejo sobre cómo debo hacer un error alternativo y corregirlo sin duplicarlo
Proxybee
0

Deje que se cargue el DOM. Para hacer algo en el DOM, primero debes cargarlo. En su caso, <div>primero debe cargar la etiqueta. entonces tienes algo que modificar. si carga el js primero, entonces esa función está buscando HTMLque haga lo que pidió hacer, pero cuando ese momento se HTMLesté cargando y su función no pueda encontrar el archivo HTML. Entonces puedes poner el guión al final de la página. dentro de la <body>etiqueta, la función puede acceder a <div>porque DOM ya está cargado en el momento en que ingresa al script.

HeshanHH
fuente