I have some javascript that will not work in IE, can anyone help?
It works fine in Mozilla and Chrome.
Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
  .hide{
    display:none;
  }
</style>
</head>
<body>

  <div id="tabs">
    <div id="nav">
      <p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" /></p>
      <p>Show Div 2:<input type="radio" name="tab" value="pkfrom" class="div2" /></p>
    </div>

    <div id="div1" class="tab">
      <p>Enter<input type="text" name="input"></p>
    </div>

    <div id="div2" class="tab">
      <p><input type="text" name="input"></p>
    </div>
  </div>

  <script type="text/javascript" charset="utf-8">
    (function(){
      var tabs =document.getElementById('tabs');
      var nav = tabs.getElementsByTagName('input');

      /*
      * Hide all tabs
      */
      function hideTabs(){
        var tab = tabs.getElementsByTagName('div');
        for(var i=0;i<=nav.length;i++){
          if(tab[i].className == 'tab'){
            tab[i].className = tab[i].className + ' hide';
          }
        }
      }

      /*
      * Show the clicked tab
      */
      function showTab(tab){
        document.getElementById(tab).className = 'tab'
      }

      hideTabs(); /* hide tabs on load */

      /*
      * Add click events
      */
      for(var i=0;i<nav.length;i++){
        nav[i].onclick = function(){
          hideTabs();
          showTab(this.className);
        }
      }
    })();
  </script>
</body>
</html>

I have some javascript that will not work in IE

What's not working? Just dumping code doesn't make it a valid question.

Member Avatar for stbuchok

I believe line 62 should be:

showTab(this);

and line 51 should be:

tab.className = 'tab';

Just guessing though, haven't tested it.

sorry guys I wasn't being clear with you earler. What is supposed to happen is when a radio button is clicked it will show the hidden input field.

-Sorry maestro, your code ain't working on either one...

  • Firefox says:: TypeError: tab[i] is undefined
  • Chrome says:: Uncaught TypeError: Cannot read property 'className' of undefined
  • Explorer says:: Unable to get property 'className' of undefined or null reference

My question to you is why are you using a dumb statement like "Javascript not working in IE" instead of describing the problem you are having with firefox and chrome, "which are working fine" - instead?

heh.. Im guessing your problem starts on line 31 and ends on line 65...

why are you doing a self-executing function before the window has loaded? I get it's top down, but you're defining and running code as it's being read. You're not getting very much speed boost by doing this.

Line 40, you are using an HTML collection, who has an index that starts at 0, but you go to <= of the collection's length (therefore, you are 1 higher than existing -> this makes an error on line 41 because tab[i] does not exist, so getting a property of tab[i] would result in failure because you cannot get a property of undefined).

Lastly, and I could be wrong about this... but meh, Ill toss it out as theory... since you are self-executing and not naming the function (it is anonymous), you are making functions that are not in the window scope implicitly (which makes them single run). So, you may be trying to execute code that doesn't really exist. Even if you were to name the function (function foo() { })(); you still may come across the problem of being out of scope. -- edit: Especially on line 62, where "this" most definately does not refer to the window or any given element on the page, but instead the anonymous function (I am 99% sure of this...). Instead, you should be passing in the event, and get the source element of the event, but doing that through an anonymous function is not the most ideal way about doing this, but it should work with some refactoring of your code.

Self executing code is meant as an entry to an API or for setting up a complex tool that you want to be plug and play for users (at least, in my opinion). I fear you may not be doing what you think you are.

Thanks guys this is solved

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.