用DIV内容替换DIV内容JavaScript（没有jQuery）
问题描述：
我目前正在为MOSS 2007中的一个页面的表单工作，并且由于政府的限制，我不得不使用大量JavaScript代替CSS3和jQuery。我来自C＃世界，JavaScript对我来说还是一个新的东西。用DIV内容替换DIV内容JavaScript（没有jQuery）
我目前的目标是用隐藏在页面上的另一个元素的内容替换固定div元素的内容。我马上就要解决这个问题。目前我使用一个简单的（伪：doc.getbyid（id）.innerhtml = newdiv）来替换div的内容，现在我的两个理论是：1）onclick事件不调用函数，或者2 ）替换只是不起作用。
(function() {
\t document.getElementById("currentSlide").innerHtml = document.getElementById("contactSlide").innerHtml;
})();
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
\t document.getElementById("currentSlide").innerHtml = document.getElementById(eIDs[id]).innerHtml;
}#msform {
\t width: 400px;
\t margin: 50px auto;
\t text-align: center;
\t position: relative;
}
#msform .fsDiv {
\t background: white;
\t border: 0 none;
\t border-radius: 3px;
\t box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
\t padding: 20px 30px;
\t width: 80%;
\t margin: 0 10%;
\t position: relative;
}
#msform .fsDiv:not(:first-of-type) {
\t display: none;
}
#msform input, #msform textarea {
\t padding: 15px;
\t border: 1px solid #ccc;
\t border-radius: 3px;
\t margin-bottom: 10px;
\t width: 100%;
\t box-sizing: border-box;
\t font-family: montserrat;
\t color: #2C3E50;
\t font-size: 13px;
}
#msform .action-button {
\t width: 100px;
\t background: #27AE60;
\t font-weight: bold;
\t color: white;
\t border: 0 none;
\t border-radius: 1px;
\t cursor: pointer;
\t padding: 10px 5px;
\t margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
\t box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
\t font-size: 15px;
\t text-transform: uppercase;
\t color: #2C3E50;
\t margin-bottom: 10px;
}
.subtitle {
\t font-weight: normal;
\t font-size: 13px;
\t color: #666;
\t margin-bottom: 20px;
}
#progressbar {
\t margin-bottom: 30px;
\t overflow: hidden;
\t counter-reset: step;
}
#progressbar li {
\t list-style-type: none;
\t color: black;
\t text-transform: uppercase;
\t font-size: 9px;
\t width: 33.33%;
\t float: left;
\t position: relative;
}
#progressbar li:before {
\t content: counter(step);
\t counter-increment: step;
\t width: 20px;
\t line-height: 20px;
\t display: block;
\t font-size: 10px;
\t color: #333;
\t background: white;
\t border-radius: 3px;
\t margin: 0 auto 5px auto;
}
#progressbar li:after {
\t content: '';
\t width: 100%;
\t height: 2px;
\t background: white;
\t position: absolute;
\t left: -50%;
\t top: 9px;
\t z-index: -1;
}
#progressbar li:first-child:after {
\t content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
\t background: #27AE60;
\t color: white;
}\t <div id="msform">
\t \t <ul id="progressbar">
\t \t <li class="active">Contact Information</li>
\t \t <li>Request Type</li>
\t \t <li>Details</li>
\t \t </ul>
<div id="currentSlide" class="fsDiv"></div>
\t \t <div id="contactSlide" class="fsDiv">
\t \t <h2 class="title">Contact Information</h2>
\t \t <h3 class="subtitle">Please supply your contact information.</h3>
\t \t <input type="text" name="contName" placeholder="Last Name, First Name" />
\t \t <input type="text" name="contNum" placeholder="Phone Number" />
\t \t <input type="text" name="contEma" placeholder="E-Mail" />
\t \t <input type="button" name="next" class="next action-button" value="Next" />
\t \t </div>
\t \t <div id="typeSlide" class="fsDiv">
\t \t <h2 class="fs-title">Request Type</h2>
\t \t <h3 class="fs-subtitle">What type of request would you like to make?</h3>
\t \t <span>Type: <select name="ddlTypes">
\t \t \t \t <option>Permissions</option>
\t \t \t \t <option>Report Bug</option>
\t \t \t </select></span>
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" />
\t \t <input type="button" name="next" class="next action-button" value="Next" />
\t \t </div>
\t \t <div id="permissionStage" class="fsDiv">
\t \t <h2 class="title">Permissions Request</h2>
\t \t <h3 class="subtitle">Please supply details about your request.</h3>
\t \t <input type="text" name="permName" placeholder="Last Name, First Name" />
\t \t <span>Permission Level Needed: <select name="ddlPermissions">
\t \t \t \t <option>Viewer</option>
\t \t \t \t <option>Member</option>
\t \t \t \t <option>Administrator</option>
\t \t \t </select></span>
\t \t <input type="text" name="permReason" placeholder="Reason For Permission Level" />
\t \t <input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" />
\t \t <input type="submit" name="submit" class="submit action-button" value="Submit" />
\t \t </div>
\t \t <div id="bugReportSlide" class="fsDiv">
\t \t <h2 class="title">Report An Issue</h2>
\t \t <h3 class="subtitle">Please provide some details about the issue.</h3>
\t \t <input type="text" name="bugLocation" placeholder="Link To Page" />
\t \t <input type="text" name="bugDescription" placeholder="What Is Happening?" />
\t \t <span>Severity: <select name="ddlSeverity">
\t \t \t \t <option>Low</option>
\t \t \t \t <option>Medium</option>
\t \t \t \t <option>High</option>
\t \t \t \t <option>Critical</option>
\t \t \t </select></span>
\t \t <textarea name="address" placeholder="Address"></textarea>
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" />
\t \t <input type="submit" name="submit" class="submit action-button" value="Submit" />
\t \t </div>
\t </div>我能想到的唯一需要做的另一件事是存储在一个VAR内部HTML，并根据需要它分配它。请帮忙！
答
有两件事情，为什么它不工作
变化
innerHtml到innerHTML你瞄准它的元素
我之前添加load处理程序，以便DOM已准备就绪也选择放弃不必要的document.getElementById()声明并简单地调用nextSlide功能与它的第一项指标
window.addEventListener('load', function(e) {
nextSlide(0);
})
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
\t document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}#msform {
\t width: 400px;
\t margin: 50px auto;
\t text-align: center;
\t position: relative;
}
#msform .fsDiv {
\t background: white;
\t border: 0 none;
\t border-radius: 3px;
\t box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
\t padding: 20px 30px;
\t width: 80%;
\t margin: 0 10%;
\t position: relative;
}
#msform .fsDiv:not(:first-of-type) {
\t display: none;
}
#msform input, #msform textarea {
\t padding: 15px;
\t border: 1px solid #ccc;
\t border-radius: 3px;
\t margin-bottom: 10px;
\t width: 100%;
\t box-sizing: border-box;
\t font-family: montserrat;
\t color: #2C3E50;
\t font-size: 13px;
}
#msform .action-button {
\t width: 100px;
\t background: #27AE60;
\t font-weight: bold;
\t color: white;
\t border: 0 none;
\t border-radius: 1px;
\t cursor: pointer;
\t padding: 10px 5px;
\t margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
\t box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
\t font-size: 15px;
\t text-transform: uppercase;
\t color: #2C3E50;
\t margin-bottom: 10px;
}
.subtitle {
\t font-weight: normal;
\t font-size: 13px;
\t color: #666;
\t margin-bottom: 20px;
}
#progressbar {
\t margin-bottom: 30px;
\t overflow: hidden;
\t counter-reset: step;
}
#progressbar li {
\t list-style-type: none;
\t color: black;
\t text-transform: uppercase;
\t font-size: 9px;
\t width: 33.33%;
\t float: left;
\t position: relative;
}
#progressbar li:before {
\t content: counter(step);
\t counter-increment: step;
\t width: 20px;
\t line-height: 20px;
\t display: block;
\t font-size: 10px;
\t color: #333;
\t background: white;
\t border-radius: 3px;
\t margin: 0 auto 5px auto;
}
#progressbar li:after {
\t content: '';
\t width: 100%;
\t height: 2px;
\t background: white;
\t position: absolute;
\t left: -50%;
\t top: 9px;
\t z-index: -1;
}
#progressbar li:first-child:after {
\t content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
\t background: #27AE60;
\t color: white;
}<div id="msform">
\t \t <ul id="progressbar">
\t \t <li class="active">Contact Information</li>
\t \t <li>Request Type</li>
\t \t <li>Details</li>
\t \t </ul>
<div id="currentSlide" class="fsDiv"></div>
\t \t <div id="contactSlide" class="fsDiv">
\t \t <h2 class="title">Contact Information</h2>
\t \t <h3 class="subtitle">Please supply your contact information.</h3>
\t \t <input type="text" name="contName" placeholder="Last Name, First Name" />
\t \t <input type="text" name="contNum" placeholder="Phone Number" />
\t \t <input type="text" name="contEma" placeholder="E-Mail" />
\t \t <input type="button" name="next" class="next action-button" value="Next" />
\t \t </div>
\t \t <div id="typeSlide" class="fsDiv">
\t \t <h2 class="fs-title">Request Type</h2>
\t \t <h3 class="fs-subtitle">What type of request would you like to make?</h3>
\t \t <span>Type: <select name="ddlTypes">
\t \t \t \t <option>Permissions</option>
\t \t \t \t <option>Report Bug</option>
\t \t \t </select></span>
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" />
\t \t <input type="button" name="next" class="next action-button" value="Next" />
\t \t </div>
\t \t <div id="permissionStage" class="fsDiv">
\t \t <h2 class="title">Permissions Request</h2>
\t \t <h3 class="subtitle">Please supply details about your request.</h3>
\t \t <input type="text" name="permName" placeholder="Last Name, First Name" />
\t \t <span>Permission Level Needed: <select name="ddlPermissions">
\t \t \t \t <option>Viewer</option>
\t \t \t \t <option>Member</option>
\t \t \t \t <option>Administrator</option>
\t \t \t </select></span>
\t \t <input type="text" name="permReason" placeholder="Reason For Permission Level" />
\t \t <input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" />
\t \t <input type="submit" name="submit" class="submit action-button" value="Submit" />
\t \t </div>
\t \t <div id="bugReportSlide" class="fsDiv">
\t \t <h2 class="title">Report An Issue</h2>
\t \t <h3 class="subtitle">Please provide some details about the issue.</h3>
\t \t <input type="text" name="bugLocation" placeholder="Link To Page" />
\t \t <input type="text" name="bugDescription" placeholder="What Is Happening?" />
\t \t <span>Severity: <select name="ddlSeverity">
\t \t \t \t <option>Low</option>
\t \t \t \t <option>Medium</option>
\t \t \t \t <option>High</option>
\t \t \t \t <option>Critical</option>
\t \t \t </select></span>
\t \t <textarea name="address" placeholder="Address"></textarea>
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" />
\t \t <input type="submit" name="submit" class="submit action-button" value="Submit" />
\t \t </div>
\t </div>
答
您的代码没问题，但用innerHTML替换innerHtml，JavaScript区分大小写。
(function() {
document.getElementById("currentSlide").innerHTML = document.getElementById("contactSlide").innerHTML;
})();
var eIDs [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(var id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}
+0
感谢您指出，C＃也是，我认为JavaScript也是。然而不幸的是，这也没有奏效。该页面仍然加载初始的空div，所以没有下一个按钮，所以在这一点上，我怎样才能让它在没有jQuery的情况下工作，所以如果出现问题，我可以转向下一个问题。请记住像document.ready和绑定事件的标记是不允许的。另外，$也不允许以某种方式？ – lxxtacoxxl
答
(function() {
\t document.getElementById("currentSlide").innerHTML = document.getElementById("contactSlide").innerHTML;
})();
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
\t document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}#msform {
\t width: 400px;
\t margin: 50px auto;
\t text-align: center;
\t position: relative;
}
#msform .fsDiv {
\t background: white;
\t border: 0 none;
\t border-radius: 3px;
\t box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
\t padding: 20px 30px;
\t width: 80%;
\t margin: 0 10%;
\t position: relative;
}
#msform .fsDiv:not(:first-of-type) {
\t display: none;
}
#msform input, #msform textarea {
\t padding: 15px;
\t border: 1px solid #ccc;
\t border-radius: 3px;
\t margin-bottom: 10px;
\t width: 100%;
\t box-sizing: border-box;
\t font-family: montserrat;
\t color: #2C3E50;
\t font-size: 13px;
}
#msform .action-button {
\t width: 100px;
\t background: #27AE60;
\t font-weight: bold;
\t color: white;
\t border: 0 none;
\t border-radius: 1px;
\t cursor: pointer;
\t padding: 10px 5px;
\t margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
\t box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
\t font-size: 15px;
\t text-transform: uppercase;
\t color: #2C3E50;
\t margin-bottom: 10px;
}
.subtitle {
\t font-weight: normal;
\t font-size: 13px;
\t color: #666;
\t margin-bottom: 20px;
}
#progressbar {
\t margin-bottom: 30px;
\t overflow: hidden;
\t counter-reset: step;
}
#progressbar li {
\t list-style-type: none;
\t color: black;
\t text-transform: uppercase;
\t font-size: 9px;
\t width: 33.33%;
\t float: left;
\t position: relative;
}
#progressbar li:before {
\t content: counter(step);
\t counter-increment: step;
\t width: 20px;
\t line-height: 20px;
\t display: block;
\t font-size: 10px;
\t color: #333;
\t background: white;
\t border-radius: 3px;
\t margin: 0 auto 5px auto;
}
#progressbar li:after {
\t content: '';
\t width: 100%;
\t height: 2px;
\t background: white;
\t position: absolute;
\t left: -50%;
\t top: 9px;
\t z-index: -1;
}
#progressbar li:first-child:after {
\t content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
\t background: #27AE60;
\t color: white;
}\t <div id="msform">
\t \t <ul id="progressbar">
\t \t <li class="active">Contact Information</li>
\t \t <li>Request Type</li>
\t \t <li>Details</li>
\t \t </ul>
<div id="currentSlide" class="fsDiv"></div>
\t \t <div id="contactSlide" class="fsDiv">
\t \t <h2 class="title">Contact Information</h2>
\t \t <h3 class="subtitle">Please supply your contact information.</h3>
\t \t <input type="text" name="contName" placeholder="Last Name, First Name" />
\t \t <input type="text" name="contNum" placeholder="Phone Number" />
\t \t <input type="text" name="contEma" placeholder="E-Mail" />
\t \t <input type="button" name="next" class="next action-button" value="Next" />
\t \t </div>
\t \t <div id="typeSlide" class="fsDiv">
\t \t <h2 class="fs-title">Request Type</h2>
\t \t <h3 class="fs-subtitle">What type of request would you like to make?</h3>
\t \t <span>Type: <select name="ddlTypes">
\t \t \t \t <option>Permissions</option>
\t \t \t \t <option>Report Bug</option>
\t \t \t </select></span>
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" />
\t \t <input type="button" name="next" class="next action-button" value="Next" />
\t \t </div>
\t \t <div id="permissionStage" class="fsDiv">
\t \t <h2 class="title">Permissions Request</h2>
\t \t <h3 class="subtitle">Please supply details about your request.</h3>
\t \t <input type="text" name="permName" placeholder="Last Name, First Name" />
\t \t <span>Permission Level Needed: <select name="ddlPermissions">
\t \t \t \t <option>Viewer</option>
\t \t \t \t <option>Member</option>
\t \t \t \t <option>Administrator</option>
\t \t \t </select></span>
\t \t <input type="text" name="permReason" placeholder="Reason For Permission Level" />
\t \t <input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" />
\t \t <input type="submit" name="submit" class="submit action-button" value="Submit" />
\t \t </div>
\t \t <div id="bugReportSlide" class="fsDiv">
\t \t <h2 class="title">Report An Issue</h2>
\t \t <h3 class="subtitle">Please provide some details about the issue.</h3>
\t \t <input type="text" name="bugLocation" placeholder="Link To Page" />
\t \t <input type="text" name="bugDescription" placeholder="What Is Happening?" />
\t \t <span>Severity: <select name="ddlSeverity">
\t \t \t \t <option>Low</option>
\t \t \t \t <option>Medium</option>
\t \t \t \t <option>High</option>
\t \t \t \t <option>Critical</option>
\t \t \t </select></span>
\t \t <textarea name="address" placeholder="Address"></textarea>
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" />
\t \t <input type="submit" name="submit" class="submit action-button" value="Submit" />
\t \t </div>
\t </div>你在你的nextSlide功能曾与帕拉姆的一个问题，你是路过var id，当它应该只是id。而你的var eIDs错过了=，所以你的数组从未在变量中声明。上面的绅士仍在使用不正确的代码。你有一个点击处理程序？我们可以看到它吗？
答
的问题是与脚本本身的位置;移动到身体的尽头，像魅力一样工作！诸如innerHTML以及eid和var id的等号这些小问题都只是小小的疏忽;当然，我必须为onclick添加额外的处理程序，一旦我得到负载工作。它现在像一个魅力。谢谢大家的帮助！
+1
这个问题不是放置，而是它在DOM准备好之前还是之后运行，我在我的回答中解释过。 – LGSon
我也有时也为政府客户工作 - 在服务器上托管jQuery应该没有限制;从外部来源抓住它是一个不容否认的。 –
这里的问题是让人们处理这个问题并把它放到服务器上。从雇用之日起，我花了一个月的时间甚至让电脑开始工作。还有三个月才能真正开始编码。仍然没有我需要的所有工具，甚至没有VS.我不知道要花多长时间才能在服务器上获取jQuery。 – lxxtacoxxl