Debería ser fácil, pero tan fácil como debería ser, no puedo resolver el problema.

Si estoy escribiendo el siguiente código HTML y JS en un editor en línea, todo funciona bien, pero si estoy escribiendo esto en mi editor (sin conexión) no funcionará. Aquí está el código en línea: http://jsbin.com/kenurunahu/1/edit?html,js,output)

Apuesto a que tiene algo que ver con el orden de carga y cómo están vinculados los archivos.

Así es como se ve mi archivo HTML (local) (donde están vinculados los archivos):

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" content="Index.css">
  <script src="Script.js"></script>
</head>

<body>
  <p id="demo">
    something
  </p>
</body>

</html>

Muchas gracias por la ayuda!

[Actualización] Firefox y Chrome muestran el archivo JS. A veces recibo un mensaje de error que dice 'innerHTML es nulo', pero si escribo el mismo código en la consola, todo funciona bien.

0
David 7 may. 2016 a las 18:28

3 respuestas

La mejor respuesta

Tiene el error cuando el script js se carga antes de que el navegador cargue completamente el dom html. Una solución simple para su prueba es colocar el script incluido al final de su página html, así:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" content="Index.css">
</head>

<body>
  <p id="demo">
    something
  </p>
  <script src="Script.js"></script>
</body>

</html>

Una mejor solución es ejecutar su script solo cuando el dom está completamente cargado. Por ejemplo, con el evento de carga del cuerpo:

<body onload="yourFunc()"> 

O mejor evento usando solo código js, por ejemplo con la función jquery ready o escribiendo un controlador personalizado simple que debería funcionar en todos los navegadores principales:

document.addEventListener("DOMContentLoaded", function(event) { 
  //call your func here
});

Espero que eso ayude.

1
Dypso 7 may. 2016 a las 16:09

Algunas conjeturas:

  1. La capitalización es importante. Si el archivo se llama script.js no enlace a Script.js

  2. ¿Está su archivo js en la misma carpeta que el documento index.html? Porque eso es lo que estás diciendo.

Normalmente, organizamos nuestra estructura de archivos de esta manera:

public_html - css - js - img - inc

Si sus estilos / scripts están almacenados en subcarpetas, como js y css, debe modificar sus referencias a:

<link rel="stylesheet" content="css/Index.css">
<script src="js/Script.js"></script>
0
cssyphus 7 may. 2016 a las 15:32

Como buena práctica, sus scripts deben colocarse al cierre de la etiqueta body. Las secuencias de comandos externas están bloqueando y, por lo tanto, tendría sentido que no las coloquemos en la parte superior. Además, cuando su script colocado en la parte superior se ejecuta, su DOM puede no estar listo, lo que significa que cualquier elemento al que intente acceder su script puede no estar presente en DOM, lo que da como resultado su error.

Por lo tanto, todos sus scripts deben estar al cierre de la etiqueta body. De esa manera, cuando el script se carga y se ejecuta, puede estar seguro de que el DOM está listo.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" content="Index.css">

</head>

<body>
  <p id="demo">
    something
  </p>
  <script src="Script.js"></script>
</body>

</html>
0
Sandeep Nayak 7 may. 2016 a las 16:01