CODEWITHSUNDEEP
javascriptfunctioncallonload
shahmeer navid
shahmeer navid

Reputation: 235

Function is not Called

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>

......

Upvotes: 5

Views: 356

Answers (2)

Alex Curtis
Alex Curtis

Reputation: 5767

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

Upvotes: 2

Zoidberg
Zoidberg

Reputation: 10333

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.

Upvotes: 1

Related Questions