将 DIV 内容替换为 DIV 内容 JavaScript（否 jQuery）

Question

我目前正在为 MOSS 2007 中的一个页面制作表单，由于政府限制，我被迫使用大量 JavaScript 代替 CSS3 和 jQuery。我来自 C# 世界，JavaScript 对我来说还是有些陌生。

我当前的 objective 是将固定 div 元素的内容替换为页面上隐藏的另一个元素的内容。我正在竭尽全力尝试解决此页面上唯一剩下的问题。目前我正在使用一个简单的（伪：doc.getbyid(id).innerhtml = newdiv）来替换div的内容，现在我的两个理论是要么 1) onclick 事件没有调用该函数，要么 2) 替换不起作用。

(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>

我唯一能想到的另一件事是将内部 html 存储在一个 var 中，并根据需要分配它。请帮忙！

Answer 1

您的代码没问题，但是将 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;
}

Answer 2

(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>

您的 nextSlide 函数中的参数有问题，您传递的是 var id，而它应该只是 id。并且您的 var eIDs 缺少 = 因此您的数组从未在变量中声明。上面这位先生仍在使用不正确的代码。你有点击处理程序吗？我们能看到吗？

Answer 3

它不起作用的原因有 2 个

将innerHtml更改为innerHTML
添加一个 load 处理程序，以便 DOM 在定位其元素之前准备就绪

我还选择删除不必要的 document.getElementById() 语句并使用第一项索引

简单地调用 nextSlide 函数

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>

Answer 4

问题在于脚本本身的位置；移动到 body 的末尾并且工作得很好！ innerHTML 和 eids 的等号以及 var id 等小问题只是小疏忽；当然，一旦加载开始工作，我就必须为 onclick 添加额外的处理程序。它现在就像一个魅力。谢谢大家的大力帮助！

将 DIV 内容替换为 DIV 内容 JavaScript（否 jQuery）

Replace DIV contents with DIV contents JavaScript (No jQuery)

html

javascript

css

asp.net

sharepoint-2007