Replace DIV contents with DIV contents JavaScript (No jQuery)

Question

I am currently working on a form for a page in MOSS 2007 and am forced to use a lot of JavaScript in place of CSS3 and jQuery due to government restrictions. I come from the C# world and JavaScript is still somewhat new to me.

My current objective is to replace the contents of a stationary div element with the contents of another that is hidden on the page. I'm coming to my wits end trying resolve this only remaining issue on this page. Currently I'm using a simple (pseudo: doc.getbyid(id).innerhtml = newdiv) to replace the contents of the div, now my two theories are that either 1) the onclick event isn't calling the function, or 2) the replace just isn't working.

(function() {
	document.getElementById("currentSlide").innerHtml = document.getElementById("contactSlide").innerHtml;
})();

var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];

function nextSlide(id) {
	document.getElementById("currentSlide").innerHtml = document.getElementById(eIDs[id]).innerHtml;
}

#msform {
	width: 400px;
	margin: 50px auto;
	text-align: center;
	position: relative;
}
#msform .fsDiv {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;
	width: 80%;
	margin: 0 10%;
	position: relative;
}
#msform .fsDiv:not(:first-of-type) {
	display: none;
}
#msform input, #msform textarea {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
}
#msform .action-button {
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: black;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1;
}
#progressbar li:first-child:after {
	content: none; 
}
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}

	<div id="msform">
  		<ul id="progressbar">
    		<li class="active">Contact Information</li>
    		<li>Request Type</li>
    		<li>Details</li>
  		</ul>
      <div id="currentSlide" class="fsDiv"></div>
  		<div id="contactSlide" class="fsDiv">
    		<h2 class="title">Contact Information</h2>
    		<h3 class="subtitle">Please supply your contact information.</h3>
    		<input type="text" name="contName" placeholder="Last Name, First Name" />
    		<input type="text" name="contNum" placeholder="Phone Number" />
    		<input type="text" name="contEma" placeholder="E-Mail" />
    		<input type="button" name="next" class="next action-button" value="Next" />
  		</div>
  		<div id="typeSlide" class="fsDiv">
    		<h2 class="fs-title">Request Type</h2>
    		<h3 class="fs-subtitle">What type of request would you like to make?</h3>
    		<span>Type: <select name="ddlTypes">
				<option>Permissions</option>
				<option>Report Bug</option>
			</select></span>
    		<input type="button" name="previous" class="previous action-button" value="Previous" />
    		<input type="button" name="next" class="next action-button" value="Next" />
  		</div>
  		<div id="permissionStage" class="fsDiv">
    		<h2 class="title">Permissions Request</h2>
    		<h3 class="subtitle">Please supply details about your request.</h3>
    		<input type="text" name="permName" placeholder="Last Name, First Name" />
    		<span>Permission Level Needed: <select name="ddlPermissions">
				<option>Viewer</option>
				<option>Member</option>
				<option>Administrator</option>
			</select></span>
    		<input type="text" name="permReason" placeholder="Reason For Permission Level" />
    		<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
    		<input type="button" name="previous" class="previous action-button" value="Previous" />
    		<input type="submit" name="submit" class="submit action-button" value="Submit" />
  		</div>
  		<div id="bugReportSlide" class="fsDiv">
    		<h2 class="title">Report An Issue</h2>
    		<h3 class="subtitle">Please provide some details about the issue.</h3>
    		<input type="text" name="bugLocation" placeholder="Link To Page" />
    		<input type="text" name="bugDescription" placeholder="What Is Happening?" />
    		<span>Severity: <select name="ddlSeverity">
				<option>Low</option>
				<option>Medium</option>
				<option>High</option>
				<option>Critical</option>
			</select></span>
    		<textarea name="address" placeholder="Address"></textarea>
    		<input type="button" name="previous" class="previous action-button" value="Previous" />
    		<input type="submit" name="submit" class="submit action-button" value="Submit" />
  		</div>
	</div>

The only other thing I can think to do is to store the inner html in a var and just assigning it as needed. Please help!

Answer 1

There are 2 things why it's not working

1. change innerHtml to innerHTML

2. add a load handler so DOM is ready before you target its elements

I also chose to drop the unnecessary document.getElementById() statement and simpy call the nextSlide function with its first item index

window.addEventListener('load', function(e) {
  nextSlide(0);
})

var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];

function nextSlide(id) {
	document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}

#msform {
	width: 400px;
	margin: 50px auto;
	text-align: center;
	position: relative;
}
#msform .fsDiv {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;
	width: 80%;
	margin: 0 10%;
	position: relative;
}
#msform .fsDiv:not(:first-of-type) {
	display: none;
}
#msform input, #msform textarea {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
}
#msform .action-button {
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: black;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1;
}
#progressbar li:first-child:after {
	content: none; 
}
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}

<div id="msform">
  		<ul id="progressbar">
    		<li class="active">Contact Information</li>
    		<li>Request Type</li>
    		<li>Details</li>
  		</ul>
      <div id="currentSlide" class="fsDiv"></div>
  		<div id="contactSlide" class="fsDiv">
    		<h2 class="title">Contact Information</h2>
    		<h3 class="subtitle">Please supply your contact information.</h3>
    		<input type="text" name="contName" placeholder="Last Name, First Name" />
    		<input type="text" name="contNum" placeholder="Phone Number" />
    		<input type="text" name="contEma" placeholder="E-Mail" />
    		<input type="button" name="next" class="next action-button" value="Next" />
  		</div>
  		<div id="typeSlide" class="fsDiv">
    		<h2 class="fs-title">Request Type</h2>
    		<h3 class="fs-subtitle">What type of request would you like to make?</h3>
    		<span>Type: <select name="ddlTypes">
				<option>Permissions</option>
				<option>Report Bug</option>
			</select></span>
    		<input type="button" name="previous" class="previous action-button" value="Previous" />
    		<input type="button" name="next" class="next action-button" value="Next" />
  		</div>
  		<div id="permissionStage" class="fsDiv">
    		<h2 class="title">Permissions Request</h2>
    		<h3 class="subtitle">Please supply details about your request.</h3>
    		<input type="text" name="permName" placeholder="Last Name, First Name" />
    		<span>Permission Level Needed: <select name="ddlPermissions">
				<option>Viewer</option>
				<option>Member</option>
				<option>Administrator</option>
			</select></span>
    		<input type="text" name="permReason" placeholder="Reason For Permission Level" />
    		<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
    		<input type="button" name="previous" class="previous action-button" value="Previous" />
    		<input type="submit" name="submit" class="submit action-button" value="Submit" />
  		</div>
  		<div id="bugReportSlide" class="fsDiv">
    		<h2 class="title">Report An Issue</h2>
    		<h3 class="subtitle">Please provide some details about the issue.</h3>
    		<input type="text" name="bugLocation" placeholder="Link To Page" />
    		<input type="text" name="bugDescription" placeholder="What Is Happening?" />
    		<span>Severity: <select name="ddlSeverity">
				<option>Low</option>
				<option>Medium</option>
				<option>High</option>
				<option>Critical</option>
			</select></span>
    		<textarea name="address" placeholder="Address"></textarea>
    		<input type="button" name="previous" class="previous action-button" value="Previous" />
    		<input type="submit" name="submit" class="submit action-button" value="Submit" />
  		</div>
	</div>