given an array of html elements, display only one and paging through each

<script type="application/javascript">
var pos=1;
function previous() {
	if (pos <=1) {
		return;
	}
	var currentdiv=document.getElementById("div"+pos);
	currentdiv.style.display="none";
	pos--;
	var previousdiv=document.getElementById("div"+pos);
	previousdiv.style.display="block";
}

function next() {
	if (pos >=4) {
		return;
	}
	var currentdiv=document.getElementById("div"+pos);
	currentdiv.style.display="none";
	pos++;
	var nextdiv=document.getElementById("div"+pos);
	nextdiv.style.display="block";
}


</script>

header <p>

<button onclick="previous()">previous</button> <button onclick="next()">next</button>
<div id="div1" style="display:block">
 <table border=1>
   	<tr> <td>div1</td><td>1</td></tr>	
	<tr> <td>2</td><td>3</td></tr>
 </table>
</div>

<div id="div2" style="display:none">
 <table border=1>
   	<tr> <td>div2</td><td>1</td></tr>	
	<tr> <td>2</td><td>3</td></tr>
 </table>
 <button onclick="alert('div2 can be clicked')">Click me</button>
</div>

<div id="div3" style="display:none">
 <table border=1>
   	<tr> <td>div3</td><td>1</td></tr>	
	<tr> <td>2</td><td>3</td></tr>
 </table>
</div>

<div id="div4" style="display:none">
 <table border=1>
   	<tr> <td>div4</td><td>1</td></tr>	
	<tr> <td>2</td><td>3</td></tr>
 </table>
</div>


footer <p>