Hi there I'm pretty new to Javascript, and I have this tutorial/slideshow assignment due next week.

Basically we're supposed to include 8 separate divs on our html document, that have a photo and some text in them (explaining each step of the tutorial). All the divs need the same class name. Then we're to use javascript to hide all of the divs except the first step. Then we need next and previous buttons to click through the different steps.

He gave us two separate examples (using peoples names as variables) in class. One on how to hide/show divs with javascript, and the other to make a prev/next button work. I've tried to combine the two...but no luck

I can get it to click through some of the divs, but it won't hide them when you first load the page, and on the 6th div it keeps showing the numbers 0 through 7 for some reason.

I've been changing variables and trying to figure this out for days now...Here is the code I'm using. Any help would be appreciated!

HTML
HTML Code:
<!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=utf-8" />
    <title>How to Make Cookies</title>
    <script src="script2.js" type="text/javascript"></script>
    <style>
	
		body{
			background-color:#E7E4D3;
		}
		
		div{
			width:650px;	
		}
    	      p{	
			font:Tahoma, Geneva, sans-serif;
			border:1px solid #000;
			background-color:#C36;
			padding:10px;
			margin:5px;
		}
		span.btn{
			border:1px solid #333;
			padding:5px;
			margin:5px;
			cursor:pointer;
			background-color:#FCC;
		}
			
    </style>
</head>

<body>

    <span class="btn" id="prev">Previous</span>
    <span class="btn" id="next">Next</span>
    
    <div id="slide">
         
    <div class="output">
   <p>
    Step 1<br/>
    <img src="images/1.jpg" />
    </p>
    </div>
    
    <div class="output">
    <p>
    Step 2<br/>
    <img src="images/2.jpg" />
    </p>
    </div>
       
    <div class="output">
    <p>
    Step 3<br/>
    <img src="images/3.jpg" />
    </div>
    
    <div class="output">
    <p>
    Step 4<br/>
    <img src="images/4.jpg" />
    </p>
    </div>
    
    <div class="output">
    <p>
    Step 5<br/>
    <img src="images/5.jpg" />
    </p>
    </div>
    
    <div id="output">
    <p>
    Step 6<br/>
    <img src="images/6.jpg" />
    </p>
    </div>
    
       
</div>   
</body>
</html>
Javascript
Code:
var names = ["bob", "fred", "george", "marc", "emma", "carol", "nicole"];

		
var currentNum = 0;

window.onload = init;

var allDivs;

function init(){
	var div=document.getElementById("output");
	//find the div where we will be putting the paragraphs
	//loop through the array "names" and create a paragraph for each
	for(var jeff=0;jeff< names.length; jeff++){
	//0, 1, 2, 3, 4, 5, 6, 7	
	var p = document.createElement("div");
	var t = document.createTextNode(jeff + " " + names [jeff]);
	div.appendChild( t );
	div.appendChild( p );
	//hide all variables except the first one
	if( currentNum == jeff){
	div.style.display="block";
	}else{
		div.style.display="none";
		}
	}
	//add the onclick handlers to the buttons
	document.getElementById("next").onclick = goNext;
	document.getElementById("prev").onclick = goPrev;
	
		}
	
	
			
	for(var i=0; i<names.length; i++){
		if( names[i].className == "output"){
			names[i].className = "";
		
				
		}else{
			//hello[i].className = "output";
			//The above line adds the class "output" to the divs that do not have it
			names[i].style.display ="none";
		
		}
	}

	

function goNext(){
	currentNum++;
	if(currentNum>names.length - 1){
		currentNum=0;
		//if the number goes above 7, set to 0
	}
	//after we change the number we must change the displayed paragraph
	changeDisplay();
}

function goPrev(){
	currentNum--;
	if(currentNum<0){
		currentNum=names.length-1;
		//if the number goes below 0, then set to 7
	}
//after we change the number we must change the displayed paragraph
	changeDisplay();
}

function changeDisplay(){
	var ps = document.getElementById("slide").getElementsByTagName("div");
	//only get the paragraphs inside the div "slide"
	for(var jeff=0;jeff< ps.length; jeff++){
		if( currentNum == jeff){
			ps[jeff].style.display="block";
		}else{
			ps[jeff].style.display="none";
		}
	}
}