Some Javascript Works on Localhost, Some Doesn't - All Works on Remote Server?

I spent a lot of time setting up a local testing server today, and after trying to install a bunch of stuff manually I finally decided to just use WampServer, which seems great.

After testing out my site I was very happy to see all the PHP executing flawlessly, but I noticed that some of the javascript didn't seem to be working, and some of the images won't load.

All of the paths are relative - image paths in the css look like this: url(img/btn_bg.png). Some of them show up, some don't, even though they are all in the same place locally, and I can access them via the web browser if I type the path/filename manually. They all show up on the remote site. I checked to make sure that the paths weren't dependent on the remote site (not absolute paths).

I'm not really sure how to test what is going on with the JavaScript. I've got firebug, but I don't know how to use the debugging features. I did try stub testing via alerts, with no success. Since all the JS code is in the same file, it's working correctly on the remote server, and SOME of it is working correctly locally, I'm not sure what could be going on with it? Again, the paths are all relative.

Since this project is proprietary, I'm not allowed to disclose much of the code, but here's a few examples:

    function changeDiv()
    {
    var direction = arguments[0];
    var tabs = new Array(
        'basics', 'operations', 'info', 'contractinfo', 'contractsize',
        'intent_tab', 'transportation', 'type', 'mep', 'materials',
        'clinicalresearch', 'consulting', 'collaboration', 'construction',
        'education', 'environmental', 'vendor', 'realestate', 'recs', 'fin');

var vis = new Array();
for ( a = 0; a < tabs.length; ++a )
{
    var temp = tabs[a];
    if (document.getElementById(temp).className.match('show'))
    {
        vis += tabs[a];
  开发者_C百科  }
}
if (
        vis == 'basics' || vis == 'operations' || vis == 'info' ||
        vis == 'contractinfo' || vis == 'contractsize' || vis == 'intent_tab' ||
        vis == 'transportation' || vis == 'materials' || vis == 'recs' ||
        vis == 'fin' )
{
    switch (vis)
    {
        case 'basics':
        document.getElementById('operations').className =
                        document.getElementById('operations').className.
                            replace(/\bhide\b/, 'show');
        document.getElementById('basics').className =
                        document.getElementById('basics').className.
                            replace(/\bshow\b/, 'hide');
        document.getElementById('back_button').className =
                        document.getElementById('back_button').className.
                            replace(/\bhide\b/, 'show');
        break;

        case 'operations':
        if (direction == 'next')
        {
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('operations').className =
                                document.getElementById('operations').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('basics').className =
                                document.getElementById('basics').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('operations').className =
                                document.getElementById('operations').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('back_button').className =
                                document.getElementById('back_button').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'info':
        if (direction == 'next')
        {
            document.getElementById('contractinfo').className =
                                document.getElementById('contractinfo').className.
                                     replace(/\bhide\b/, 'show');
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                     replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('operations').className =
                                document.getElementById('operations').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'contractinfo':
        if (direction == 'next')
        {
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractinfo').className =
                                document.getElementById('operations').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractinfo').className =
                                document.getElementById('contractinfo').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'contractsize':
        if (direction == 'next')
        {
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('contractinfo').className =
                                document.getElementById('contractinfo').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'intent_tab':
        if (direction == 'next')
        {
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'transportation':
        if (direction == 'next')
        {
            document.getElementById('materials').className =
                                document.getElementById('materials').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'materials':
        if (direction == 'next')
        {
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('materials').className =
                                document.getElementById('materials').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('transportation').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('materials').className =
                                document.getElementById('materials').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'recs':
        if (direction == 'next')
        {
            document.getElementById('fin').className =
                                document.getElementById('fin').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
        }

        break;

        case 'fin':
        if (direction == 'back')
        {
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('fin').className =
                                document.getElementById('fin').className.
                                    replace(/\bshow\b/, 'hide');
        }

        break;

    }
}
else 
{
    if (vis == 'type')
    {
        if (direction == 'next')
        {
            logic('q_16');
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bshow\b/, 'hide');
        }
    }
    else if ( vis != 'type')
    {
        if (vis == 'recs' && direction == 'next')
        {
            document.getElementById('fin').className =
                                document.getElementById('fin').className.
                                    replacec(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('calc_risk').className =
                                document.getElementById('calc_risk').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('recs_header').className =
                                document.getElementById('recs_header').className.
                                    replace(/\bhide\b/, 'show');
        }
        else if (vis == 'recs' && direction == 'back')
        {
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('calc_risk').className =
                                document.getElementById('calc_risk').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs_header').className =
                                document.getElementById('recs_header').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else if (direction == 'next')
        {
            var tab_array = new Array('mep', 'realestate', 'vendor', 'environmental', 'education', 'construction', 'collaboration', 'consulting', 'clinicalresearch');

            var visTab = document.getElementById('vis_tab').value;

            for (x = 0; x < tab_array.length; ++x)
            {
                var temp_tab = tab_array[x];
                document.getElementById(temp_tab).className =
                                        document.getElementById(temp_tab).className.
                                            replace(/\bshow\b/, 'hide');
            }

            switch(visTab)
            {
                case 'mep':
                wholesale();
                break;

                case 'realestate':
                realestate();
                break;

                case 'vendor':
                vendor();
                break;

                case 'environmental':
                environment();
                break;

                case 'education':
                education();
                break;

                case 'construction':
                construction();
                break;

                case 'collaboration':
                collaboration();
                break;

                case 'consulting':
                consulting();
                break;

                case 'clinicalresearch':
                clinicalresearch();
                break;
            }

            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('calc_risk').className =
                                document.getElementById('calc_risk').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('recs_header').className =
                                document.getElementById('recs_header').className.
                                    replace(/\bhide\b/, 'show');

            recsPage();
        }
    }
    else
    {
        document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
        //materials realestate vendor environmental education construction collaboration consulting clinicalresearch

        var b_vis = new Array('mep', 'realestate', 'vendor', 'environmental', 'education', 'construction', 'collaboration', 'consulting', 'clinicalresearch');

        for (x = 0; x < b_vis.length; ++x)
        {
            var temp_vis = b_vis[x];
            document.getElementById(temp_vis).className =
                                document.getElementById(temp_vis).className.
                                    replace(/\bshow\b/, 'hide');
        }
    }
}
}

The above code will work for switching between the various divs, for the most part, but this particular section isn't functioning all the way:

document.getElementById('recs').className =
    document.getElementById('recs').className.
        replace(/\bhide\b/, 'show');
document.getElementById('calc_risk').className =
    document.getElementById('calc_risk').className.
        replace(/\bshow\b/, 'hide');
document.getElementById('recs_header').className =
    document.getElementById('recs_header').className.
        replace(/\bhide\b/, 'show');

recsPage();

recsPage(); never gets called on the localhost. It works fine remotely. The code is identical between the two. There are other sections elsewhere that aren't functioning, but right now that's the only one that concerns me.

Any ideas? Since javascript executes client-side, I can't imagine why it's not working when it's not on the remote server.

Use firebug, fire up "Net" and look for 404 errors. Firebug displays the path if you hold the mouse over file name, so you should be able to deduct where the errors come from.

Also, check Firebug tab "console" for errors too. This should give you enough clues to solve the problems.