2010-02-18 17 views
40

Cuando utilizo un código como éste, que funciona bien:variable no es accesible cuando se inicializa la función fuera

function removeWarning() { 
    var systemStatus = document.getElementById("system-status"); 
    systemStatus.innerHTML = ""; 
} 

function indicateInvalidUsername() { 
    var systemStatus = document.getElementById("system-status"); 
    systemStatus.innerHTML = "Invalid username"; 
} 

Sin embargo, cuando se desea mover el systemStatus ser una variable global, que no funciona:

var systemStatus = document.getElementById("system-status"); 

function removeWarning() { 
    systemStatus.innerHTML = ""; 
} 

function indicateInvalidUsername() { 
    systemStatus.innerHTML = "Invalid username"; 
} 

¿Qué se supone que debo hacer aquí?

+22

Supongo que su etiqueta 'script' está en la parte superior de la página, por lo que cuando se ejecuta,' document.getElementById ("system-status") 'devuelve' null' porque todavía no existe, ya que el DOM está siendo analizado ... – CMS

Respuesta

27

Asegúrese de declarar la variable en el nivel "raíz", fuera de los bloques de código.

También podría eliminar el var en total, aunque eso es not recommended y lanzará una advertencia "estricta".

De acuerdo con documentation at MDC, puede establecer variables globales usando window.variablename.

+5

+1 por sugerir 'window.variablename' –

6

Supongo que el elemento system-status se declara después de ejecutar la declaración de variables. Por lo tanto, en el momento en que se declara la variable, en realidad se establece en nulo?

Debe declararlo solo, luego asigne su valor desde un controlador onLoad en su lugar, porque entonces se asegurará de que haya inicializado (cargado) correctamente el elemento en cuestión.

También podría tratar de poner la secuencia de comandos en la parte inferior de la página (o al menos en algún lugar después de declarar el elemento system-status), pero no se garantiza que siempre funcione.

6

Declare systemStatus en un ámbito externo y asígnelo en un controlador de carga.

systemStatus = null; 

function onloadHandler(evt) { 
    systemStatus = document.getElementById("...."); 
} 

O si no desea el controlador de carga, coloque la etiqueta del script en la parte inferior del código HTML.

38

Realmente depende de dónde se encuentre el código JavaScript.

El problema es probablemente causado por el DOM no está cargado cuando se ejecuta la línea

var systemStatus = document.getElementById("system-status"); 

. Podría tratar de llamar a esto en un evento de carga o, idealmente, utilizar un evento de tipo listo para DOM desde un marco de JavaScript.

+1

+1 Probablemente sea su problema. Su sintaxis (de forma aislada, de todos modos) debería funcionar bien. –

+0

Poner la secuencia de comandos al final de su html también podría funcionar, pero definitivamente no es la solución más sexy :) – MLefrancois

+4

A veces no entiendo la comunidad de SO: Dije que el problema era una condición de carrera en la respuesta propuesta y me llegó votaron a la baja ... y ahora veo que la respuesta aceptada es efectivamente una "condición racial" ... – jldupont

2

Una variable global se expresa mejor en un archivo JavaScript externo:

var system_status; 

Asegúrese de que esto no se ha utilizado ningún otro lugar. Luego, para acceder a la variable en su página, simplemente haga referencia a ella como tal. Digamos, por ejemplo, que quería llenar los resultados en un cuadro de texto,

document.getElementById("textbox1").value = system_status; 

Para asegurarse de que el objeto existe, utilice la función de lista de documentos de jQuery.

Ejemplo:

$(function() { 
    $("#textbox1")[0].value = system_status; 
}); 
+2

Los guiones no son caracteres legales en los nombres de las variables. El motor de JavaScript buscará dos variables, 'system' y' status', e intentará devolver la diferencia, ya que el espacio en blanco no importa cuando se trata de operadores binarios (es decir: '5 - 3' es lo mismo que' 5- 3'). –

+0

ok esto ha sido modificado para no tener un guion, buena captura –

2

Para definir una variable global que se basa fuera un elemento DOM algunas cosas que se deben comprobar.Primero, si el código está en la sección <head>, el DOM no se cargará en la ejecución. En este caso, un controlador de eventos debe ser colocado con el fin de establecer la variable después de que el DOM se ha cargado, como esto:

var systemStatus; 
window.onload = function(){ systemStatus = document.getElementById("system_status"); }; 

Sin embargo, si este script es en línea en la página como las cargas de DOM, entonces se puede realizar siempre que el elemento DOM en cuestión se haya cargado arriba donde se encuentra el script. Esto se debe a que javascript se ejecuta de forma síncrona. Esto sería válido:

<div id="system_status"></div> 
<script type="text/javascript"> 
var systemStatus = document.getElementById("system_status"); 
</script> 

Como resultado de este último ejemplo, la mayoría de las páginas que se ejecutan secuencias de comandos en el cuerpo a ahorrar hasta el final del documento. Esto permitirá que la página se cargue, y luego se ejecutará el javascript, que en la mayoría de los casos provoca una representación visualmente más rápida del DOM.

4

This article es la respuesta a tales problemas! ;) ¡Léalo detenidamente!

Cuestiones relacionadas