2011-08-20 55 views
5

Tengo un javascript que se supone que se ejecuta después de que se carga la ventana, pero por alguna razón, nunca se ejecuta.La función no se llama

Aquí está mi código:

function setClasses(){ 
     document.getElementsByClassName("gchoice_35_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_22_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_34_0")[0].onclick = sedanShow; 

     document.getElementsByClassName("gchoice_34_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_35_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_22_1")[0].onclick = suvShow; 

     document.getElementsByClassName("gchoice_22_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_35_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_34_2")[0].onclick = vanShow; 
    } 

window.onload = setClasses; 

La función setClasses() no parece funcionar. Sin embargo, funciona cuando lo llamo manualmente a través de la consola de FireBug.

El código se coloca en el encabezado de mi página web.

Cualquier ayuda es apreciada.

HTML completas fragmento:

<head> 
...... 

<script type="text/javascript"> 
function setClasses(){ 
     document.getElementsByClassName("gchoice_35_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_22_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_34_0")[0].onclick = sedanShow; 

     document.getElementsByClassName("gchoice_34_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_35_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_22_1")[0].onclick = suvShow; 

     document.getElementsByClassName("gchoice_22_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_35_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_34_2")[0].onclick = vanShow; 
    } 

    function sedanShow(){ 
      document.getElementById("sedan").style.display="inline" 
      document.getElementById("suv").style.display="none" 
      document.getElementById("van").style.display="none" 
     } 
     function suvShow(){ 
      document.getElementById("sedan").style.display="none" 
      document.getElementById("suv").style.display="inline" 
      document.getElementById("van").style.display="none" 
     } 
     function vanShow(){ 
      document.getElementById("sedan").style.display="none" 
      document.getElementById("suv").style.display="none" 
      document.getElementById("van").style.display="inline" 
     } 
    window.onload = setClasses; 
    </script> 

......

+3

en que resulta este código en su página? ¿Te importa publicar un fragmento de HTML completo que no funciona? –

+3

Creo que setClasses se está ejecutando, ese no es el problema. Apuesto a que si pones una alerta en tu función setClasses, se disparará. Creo que es probablemente la forma en que configura su propiedad onclick. IE requiere que se establezca como una cadena, mientras que Firefox requiere que sea una función. JQuery y YUI ayudan a mitigar esto al ofrecer utilidades de eventos. Recomiendo examinar estos marcos porque ayudan a reducir una gran cantidad de caprichos de navegador cruzado con los que tienes que lidiar. – Zoidberg

+0

¿Está alguna otra cosa configurando window.onload que anula este código? – epascarello

Respuesta

2

Siempre se puede usar jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
      setClasses(); 
     }); 
</script> 

Editar

Ejemplo jQuery Evento Refactor:

$(".gchoice_35_0").click(function(){ 
    //Handler Code... 
}); 
+0

Agradable, JQuery es también una muy buena solución, ¿podría explicar su respuesta mostrando el manejo de eventos Jquery en el método setClasses? Creo que eso agregaría algo de valor a tu respuesta. – Zoidberg

+0

Una excelente referencia de API: http://api.jquery.com/click/ –

1

voy a dar una respuesta que usa YUI, no dude en utilizar o no, pero creo que son los marcos una buena idea para ayudar a acelerar el desarrollo de JavaScript. Así, añada lo siguiente a su página de

<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 

Entonces, en lugar de window.onload = someFn (porque esto puede ser peculiar en el IE, sorpresa, sorpresa), haga lo siguiente

YAHOO.util.Event.onDOMReady(function() { 
    setClasses(); 
}); 

Luego, en su establecer clases función, haga lo siguiente

function setClasses(){ 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_0")[0], 'click', sedanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_0")[0], 'click', sedanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_0")[0], 'click', sedanShow); 

     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_1")[0], 'click', suvShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_1")[0], 'click', suvShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_1")[0], 'click', suvShow); 

     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_2")[0], 'click', vanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_2")[0], 'click', vanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_2")[0], 'click', vanShow); 
    } 

Eso debería hacer el truco.