title: JavaScript event.target IE8
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/960419/javascript-ie-event">Javascript IE Event</a>  </p>
  </blockquote>
  
  
  
  <p>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 <code>var target = ev.target;</code> but Im not sure.</p>
  
  <p>The part of the script in question is: </p>
  
  <pre><code>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 += '&lt;img src="img/hrarrow.png" id="hrarrow"/&gt;';
              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 += '&lt;img src="img/hrarrow.png" id="hrarrow"/&gt;';
                  $(".navActiveText").css('margin-left','0px');
              } else if(parent.tagName === 'LI') {
                  parent.className += ' navActive';
                  target.firstChild.className += ' navActiveText';
                  parent.innerHTML += '&lt;img src="img/hrarrow.png" id="hrarrow"/&gt;';
                  $(".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 */
  </code></pre>