5

Possible Duplicate:
Javascript IE Event

I'm having a problem with IE8 executing my script. All other browsers are fine. The actual error is: 'tagName is null or not an object'. I realize that my script is probably not the best, and could use work, but I really need it to work in IE8. The script is wrapped in a document.ready jQuery function, and my jquery version is 1.5.2. I have a feelings that the main problem has to do with var target = ev.target; but Im not sure.

The part of the script in question is:

var hrNav = document.getElementById('hrNavListen');
    var hrNav2 = document.getElementById('hrNavListenTwo');
    var startButton = document.getElementById('startButton');

    //Check to see if the user is on an iPad or iPhone
    var isiPad = (navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i)) != null;

    //If the user is on an iphone or ipad, use the touchstart event listener rather than click. Use click otherwise, or use onclick for IE users.
    if (isiPad == true) {
        hrNav.addEventListener('touchstart', highlight);
    } else {
        if(hrNav.addEventListener){  
            hrNav.addEventListener('click', highlight); 
            } else {  
                hrNav.attachEvent('on'+'click', highlight);
        }
    }
/* MAIN FUNCTION TO HIGHLIGHT THE CORRECT ITEM, AS WELL AS FILL IN CORRECT DATA */
    function highlight(ev) {

        var target = ev.target;

        //Function to set the dataSection variable to the appropriate string so that the correct section is loaded
        function switchContent(var1,var2,var3,var4,var5,var6,var7,var8,var9,var10,var11,var12,var13,var14,var15,var16,var17,var18) {
            switch (target.getAttribute('data-section')) {
                case var1:
                    var dataSection = 'hrPortalMain';
                    var btn = false;
                    break;
                case var2:
                    var dataSection = 'handbookMain';
                    var btn = true;
                    break;
                case var3:
                    var dataSection = 'handbookSection1';
                    var btn = true;
                    break;
                case var4:
                    var dataSection = 'handbookSection2';
                    var btn = true;
                    break;
                case var5:
                    var dataSection = 'handbookSection3';
                    var btn = true;
                    break;
                case var6:
                    var dataSection = 'handbookSection4';
                    var btn = true;
                    break;
                case var7:
                    var dataSection = 'handbookSection5';
                    var btn = true;
                    break;
                case var8:
                    var dataSection = 'handbookSection6';
                    var btn = true;
                    break;
                case var9:
                    var dataSection = 'handbookSection7';
                    var btn = true;
                    break;
                case var10:
                    var dataSection = 'handbookSection8';
                    var btn = true;
                    break;
                case var11:
                    var dataSection = 'handbookSection9';
                    var btn = true;
                    break;
                case var12:
                    var dataSection = 'handbookSection10';
                    var btn = true;
                    break;
                case var13:
                    var dataSection = 'handbookSection11';
                    var btn = true;
                    break;
                case var14:
                    var dataSection = 'antiDiscrimination';
                    var btn = true;
                    break;
                case var15:
                    var dataSection = 'substanceAbuse';
                    var btn = true;
                    break;
                case var16:
                    var dataSection = 'disclosureRelease';
                    var btn = true;
                    break;
                case var17:
                    var dataSection = 'emergencyContact';
                    var btn = true;
                    break;
                case var18:
                    var dataSection = 'submitForms';
                    var btn = true;
                    break;
            }/* /end switch */

            //Use jQuery AJAX to load the appropriate html
            $.ajax({
                url: "views/"+dataSection+".php",
                cache: false,
                dataType: "html"
            }).done(function( html ) { 
                $("#hrContent").html(html);
            });

            return dataSection;
        }

        if (target.nodeName === 'LI') {

            $("li").removeClass("navActive");
            $("span").removeClass("navActiveText");
            $("#hrarrow").remove();
            $(".navBodyText").css('margin-left','30px');
            $("#navMain,#navMOCForms,#navHandbookMain,#navGeneralPolicyMain,#navBenefitsMain,#navTaxMain").css('margin-left','0px');

            target.innerHTML += '<img src="img/hrarrow.png" id="hrarrow"/>';
            target.className += ' navActive';
            childSpan = target.firstChild;
            childSpan.style.marginLeft = '0';
            childSpan.className += ' navActiveText';
            childSpan.firstChild.className += ' navActiveText';

            switch (target.firstChild.id) {
                case 'navMain':
                    $("#navMain").css('margin-left','-30px');
                    break;
                case 'navMOCForms':
                    $("#navMOCForms").css('margin-left','-30px');
                    break;
                case 'navHandbookMain':
                    $("#navHandbookMain").css('margin-left','-30px');
                    break;
                case 'navGeneralPolicyMain':
                    $("#navGeneralPolicyMain").css('margin-left','-30px');
                    break;
                case 'navBenefitsMain':
                    $("#navBenefitsMain").css('margin-left','-30px');
                    break;
                case 'navTaxMain':
                    $("#navTaxMain").css('margin-left','-30px');
                    break;
            }/* /end switch */


            //Determine which content to load depending on the data-* HTML attribute of each LI elements
switchContent('hrPortalMain','handbookMain','handbookSection1','handbookSection2','handbookSection3','handbookSection4','handbookSection5','handbookSection6','handbookSection7','handbookSection8','handbookSection9','handbookSection10','handbookSection11','antiDiscrimination','substanceAbuse','disclosureRelease','emergencyContact','submitForms');

        }/* /endif */

        if (target.nodeName === 'SPAN') {

            $("li").removeClass("navActive");
            $("span").removeClass("navActiveText");
            $("#hrarrow").remove();
            $(".navBodyText").css('margin-left','30px');
            $("#navMain,#navMOCForms,#navHandbookMain,#navGeneralPolicyMain,#navBenefitsMain,#navTaxMain").css('margin-left','0px');

            target.className += ' navActiveText';
            parent = target.parentNode;

            if (parent.tagName === 'SPAN') {
                parent.parentNode.className += ' navActive';
                parent.className += ' navActiveText';
                parent.parentNode.innerHTML += '<img src="img/hrarrow.png" id="hrarrow"/>';
                $(".navActiveText").css('margin-left','0px');
            } else if(parent.tagName === 'LI') {
                parent.className += ' navActive';
                target.firstChild.className += ' navActiveText';
                parent.innerHTML += '<img src="img/hrarrow.png" id="hrarrow"/>';
                $(".navActiveText").css('margin-left','0px');
            }/* /endif */

            switch (target.id) {
                case 'navMain':
                    $("#navMain").css('margin-left','-30px');
                    break;
                case 'navMOCForms':
                    $("#navMOCForms").css('margin-left','-30px');
                    break;
                case 'navHandbookMain':
                    $("#navHandbookMain").css('margin-left','-30px');
                    break;
                case 'navGeneralPolicyMain':
                    $("#navGeneralPolicyMain").css('margin-left','-30px');
                    break;
                case 'navBenefitsMain':
                    $("#navBenefitsMain").css('margin-left','-30px');
                    break;
                case 'navTaxMain':
                    $("#navTaxMain").css('margin-left','-30px');
                    break;
            }/* /end switch */

            //Determine which content to load depending on the data-* HTML attribute of each LI elements
switchContent('hrPortalMain','handbookMain','handbookSection1','handbookSection2','handbookSection3','handbookSection4','handbookSection5','handbookSection6','handbookSection7','handbookSection8','handbookSection9','handbookSection10','handbookSection11','antiDiscrimination','substanceAbuse','disclosureRelease','emergencyContact','submitForms','employeeBenefitsPackage','flexSpending','dentalEnrollment','groupEnrollment','w4','i9','directDeposit','holidayPayroll','medOneForms','generalPolicy','benefitsMain','compensationMain');

        }/* /endif */

    }/* /end highlight function */
Community
  • 1
  • 1
mdance
  • 966
  • 5
  • 16
  • 36
  • 2
    http://stackoverflow.com/questions/960419/javascript-ie-event – TheZ Nov 06 '12 at 18:52
  • Use the developer tools to step through your code to see where your problem is. (See: http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx ) – millimoose Nov 06 '12 at 18:55
  • Also: if you need comments to tell you which block is ending, your code is probably too complicated. `switchContent()` in particular is ridiculous - use an object to map the value of data-section to the URL. – millimoose Nov 06 '12 at 18:58
  • Also, if you're using jQuery anyway, why not have it handle event subscriptions? `highlight()` should also probably be two functions, one for `
  • `s, one for ``s, since they're mostly handled completely differently. (Or if they're not, the common parts put into helper functions instead of copy-pasting them between blocks.)
  • – millimoose Nov 06 '12 at 19:34
  • Jquery working example http://stackoverflow.com/questions/1811186/jquery-event-target-problem-in-ie7 – Parag Nov 28 '14 at 08:08