Function is not Called

Question

I have some javascript that is supposed to run after the window loads but for some reason, it never runs.

Here's my code:

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;

The setClasses() function doesn't seem to run. It does however work when I manually call it through the console of FireBug.

The code is placed in the header of my web page.

Any help is appreciated.

Full html snippet:

<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>

......

Where does this code appear on your page? Do you mind posting a full HTML snippet that doesn't work? — Stefan Mai, Aug 20 '11 at 11:41
I believe setClasses is running, that is not the problem. I bet if you put an alert in your setClasses function, it would fire. I believe it is probably how your setting your onclick property. IE requires it be set as a string, while firefox requires it to be a function. JQuery and YUI help mitigate this by offering event utilities. I would recommend looking into these frameworks because they help reduce a lot of cross browser quirks you have to deal with. — Zoidberg, Aug 20 '11 at 11:43
Is anything else setting window.onload that is overriding this code? — epascarello, Aug 20 '11 at 11:47
@epascarello what exactly do you mean by that? Sorry not an expert in javascript — shahmeer navid, Aug 20 '11 at 11:48
@fireshadow52 I was following the advice of one of the answers. — shahmeer navid, Aug 20 '11 at 11:49
@shahmeer navid: Why do you assign a string to the `onload` event? You should assign the function `window.onload = setClasses;`. — Shef, Aug 20 '11 at 11:50
@shahmeer navid Yes, but then I changed it, and **STILL** 3 people decide to downvote it. D: — fireshadow52, Aug 20 '11 at 11:51
@shahmeer, is onload being used somewhere else? Simple question. :) — epascarello, Aug 20 '11 at 11:53
@fireshadow52, and you changed it and it was still wrong. :) — epascarello, Aug 20 '11 at 11:54
Btw, I don't know why this question has been down voted, this is VERY relevant for Javascript beginners. — Zoidberg, Aug 20 '11 at 11:55
@shahmeer navid: Looks like **[it is working fine here](http://jsfiddle.net/Shef/zdET9/)**? — Shef, Aug 20 '11 at 11:55
Here is the webpage where I am trying to integrate this: [link](http://throughwayconsulting.com/clients/woodhaven/online-reservations/) When you visit the page the function is called but for some reason it doesnt seem to activate the onclick event (the last page of the form). It does seem to work after setClasses() is called through firebug — shahmeer navid, Aug 20 '11 at 12:10

Alex Curtis · Accepted Answer · 2011-08-20T12:19:41.820

2

You could always use 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>

Edit

Example JQuery Event Refactor:

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

edited Aug 20 '11 at 12:19

answered Aug 20 '11 at 11:54

Alex Curtis

5,659
3
28
31

Nice, JQuery is also a very good solution, could you elaborate on your answer by showing the Jquery event handling in the setClasses method? I think that would add some value to your answer. – Zoidberg Aug 20 '11 at 11:56

score 1 · Answer 2 · answered Aug 20 '11 at 11:52

I am going to give an answer that uses YUI, feel free to use it or not, but I think frameworks are a good idea to help speed up javascript development. So, add the following in to your page

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

Then instead of window.onload = someFn (because this can be quirky in IE, surprise surprise), do the following

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

Then in your set classes function, do the following

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);
    }

That should do the trick.

Function is not Called

2 Answers2

Linked