javascript - solucion - outerhtml
No se puede establecer la propiedad ''innerHTML'' de null (13)
¿Por qué recibo un error o error de tipo no detectado: no se puede establecer la propiedad ''innerHTML'' de null? 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>
Aquí está mi fragmento probarlo. 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>
Debe colocar la división hola antes de la secuencia de comandos, para que exista cuando se carga la secuencia de comandos.
He tenido el mismo problema y resulta que el error nulo fue porque 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 que se carga 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 la depuración.
Espero que esto te haya sido útil.
Javascript se ve bien. Intenta ejecutarlo después de que el div se haya cargado. Intente ejecutarse solo cuando el documento esté listo. $(document).ready en jquery.
La parte de JavaScript que se debe ejecutar una vez que se carga la página, se recomienda colocar el script de JavaScript al final de la etiqueta de 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>
Necesitas cambiar div en p . Técnicamente innerHTML significa que está dentro del <??? id=""></???> <??? id=""></???> part.
Cambio:
<div id="hello"></div>
dentro
<p id="hello"></p>
Obra:
document.getElementById(''hello'').innerHTML = ''hi'';
girará
<div id="hello"></div> into this <div id="hello">hi</div>
Lo que en realidad no tiene sentido.
También puedes intentar cambiar:
document.getElementById(''hello'').innerHTML = ''hi'';
dentro de esto
document.getElementById(''hello'').innerHTML=''<p> hi </p> '';
para que funcione.
Necesitas 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>
Puede intentar usar el método setTimeout para asegurarse de que su html se carga primero.
Simplemente ponga su JS en la window.onload
window.onload = function() {
what();
function what() {
document.getElementById(''hello'').innerHTML = ''hi'';
};
}
Veo que todos los técnicos han proporcionado la solución sobre cómo deshacerse del problema, pero nadie se ha ocupado de la razón o la causa principal de por qué está sucediendo en primer lugar.
¿Por qué recibo un error o error de tipo no detectado: no se puede establecer la propiedad ''innerHTML'' de null?
Cualquier código de javascript escrito dentro de las etiquetas de script (presente en la sección principal de su archivo HTML) es ejecutado por el motor de renderizado del navegador incluso antes de que se cargue todo su DOM. El navegador carga todo el DOM de HTML de arriba a abajo. Los scripts presentes en la etiqueta de head intentan acceder a un elemento que tiene id hello incluso antes de que se haya procesado en el DOM. 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 momento en que esté completamente seguro del hecho de que DOM está completamente cargado y el elemento hello id es accesible / disponible. Se puede lograr de dos maneras:
- Reordena tus scripts : De esta manera, tus scripts se activan solo después de que el DOM que contiene tu elemento
helloid 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 termina la etiqueta delbody. Dado que la renderización se realiza de arriba a abajo, sus scripts se ejecutan al final y no tiene 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>
- Uso del enlace de eventos : el motor de representación del navegador proporciona un evento de conexión a través de
window.onloadque le da la pista de que el navegador ha terminado de cargar el DOM. Entonces, cuando se active este evento, puede estar seguro de que su elemento con id dehelloya está cargado en el DOM y cualquier javascript activado a partir de entonces que intente acceder a este elemento no fallará. Así que 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 etiqueta dehead.
<!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>
Agrega jquery a < 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 el < 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 el < head> ):
<script type="text/javascript" src="/path/to/main.js" charset="utf-8"></script>
y agrega el código en el archivo main.js :)
<!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>
<!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>