Divs within a form (referencing in Javascript)

I am using divs to contain each of the control elements on a form, so 
that I can control the display via CSS. I am trying to loop through divs 
to locate particular divs, but I am not getting much luck in locating 
the divs.

Here is an example of the form:

  <form id = "wizard" action="http://somesite.com/prog/adduser"

method="post">
	<div ID="page1" style="{display:block}">
		<label for="firstname">First name: </label>
				  <input type="text" id="firstname"><BR>
		<label for="lastname">Last name: </label>
				  <input type="text" id="lastname"><BR>
		<label for="email">email: </label>
				  <input type="text" id="email"><BR>
		<input type="radio" name="***" value="Male"> Male<BR>
		<input type="radio" name="***" value="Female"> Female<BR>
     </div>
	<div id="page2" style="{display:none;}">
		<label for="address1">Address Line1: </label>
				  <input type="text" id="address1"><BR>
		<label for="address2">Address Line2: </label>
				  <input type="text" id="address2"><BR>
	</div>
	<div id="buttonArea"><a href="#" onclick="prevPage()">Previous</a><a 
href="#" onclick="nextPage()">Next</a></div>
  </form>


prevPage() and nextPage() are simple functions that modify a static 
variable, that determines the page number. if the page number is 
determined to be 2, then I want to change the style of div with 
id="page2" to "block", and the style of all of the other divs in the 
form, none (so they are not displayed).

This is the JS I have got so far:

   <script type="text/javascript">

	function unhideDiv(index)
	{
		//the following don't work - whats the soln?
		//var temp = document.forms[0].elements;
		//var temp = document.getElementsByTagName(\'div\');
	}

	function prevPage()
	{
		if (m_count > 1)
			unhideDiv(--m_count);

	}
	function nextPage()
	{		
		if (m_count < 2)
			unhideDiv(++m_count);
	}
	m_count = 1;
   </script>
  </HEAD>