Question

I have a very basic hide/show div function set up for when people click a certain radio button. In one of the hidden divs I need to create a form however when I add input fields to the hidden div my function stops working.

<div id="tabs">
<div id="nav">
  <input type="radio" name="primary_contact_director" value="Yes" class="div1">Yes</input>
    <input type="radio" name="primary_contact_director" value="No" class="div2">No</input>
</div>

<div id="div1" class="tab">
  <p>this is div 1</p>
</div>

<div id="div2" class="tab">
  <p>this is div 2</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);
    }
  }
})();

This code works however when I add

<label class="title">First Name:</label>
    <input type="text" name="first_name" class="form">
<label class="title">Last Name:</label>
    <input type="text" name="last_name" class="form">
<label class="title">Business Address:</label>
    <span class="instructions">Please enter a physical address. P.O. Boxes are not acceptable for filing.<br>
    If your business is run out of your home, please list that address.</span><br>
    <input type="text" name="business_address" class="form">
<label class="title">City:</label>
    <input type="text" name="business_city" class="form">
<label class="title">State</label>
    <select name="business_state">
        <option value="California">California</option>
    </select>
<label class="title">Zip Code:</label>
    <input type="text" name="business_zip" class="form">
<label class="title">Business Phone Number:</label>
    <input type="text" name="business_phone" class="form"><br>

to my div2 it stops working.

Hopefully this is a clear explanation. Any help is always appreciated!

Answer 1

In your hideTabs() function, you’ve got two typos.

First, you’re iterating through the tab[] array, but you’re checking it against the length of the nav[] array. This works because you have the same number of elements in your first example, but that’s just a coincidence. If you evaluate it against the tab[] array’s length, it will work better. The other problem you have is that your for loop ends at greater-than-or-equal-to length. THe problem is that arrays start counting at zero, so if the length is 3, the items on the list are tab[0], tab[1], and tab[2]. your code was trying to set something for tab[3], which didn’t exist.

Here’s the working code:

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

In the future, you should look into using the javascript console in Chrome (or any other browser) to check for errors if your scripts stop working—usually there’s an error that that will give you hints as to what’s happening.