2017-02-24 302 views
0

我目前正在爲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,並根據需要它分配它。請幫忙!

+0

我也有時也爲政府客戶工作 - 在服務器上託管jQuery應該沒有限制;從外部來源抓住它是一個不容否認的。 –

+0

這裏的問題是讓人們處理這個問題並把它放到服務器上。從僱用之日起,我花了一個月的時間甚至讓電腦開始工作。還有三個月才能真正開始編碼。仍然沒有我需要的所有工具,甚至沒有VS.我不知道要花多長時間才能在服務器上獲取jQuery。 – lxxtacoxxl

回答

1

有兩件事情,爲什麼它不工作

  1. 變化innerHtmlinnerHTML

  2. 你瞄準它的元素

我之前添加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>

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; 
} 
+0

感謝您指出,C#也是,我認爲JavaScript也是。然而不幸的是,這也沒有奏效。該頁面仍然加載初始的空div,所以沒有下一個按鈕,所以在這一點上,我怎樣才能讓它在沒有jQuery的情況下工作,所以如果出現問題,我可以轉向下一個問題。請記住像document.ready和綁定事件的標記是不允許的。另外,$也不允許以某種方式? – lxxtacoxxl

0

(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錯過了=,所以你的數組從未在變量中聲明。上面的紳士仍在使用不正確的代碼。你有一個點擊處理程序?我們可以看到它嗎?

0

的問題是與腳本本身的位置;移動到身體的盡頭,像魅力一樣工作!諸如innerHTML以及eid和var id的等號這些小問題都只是小小的疏忽;當然,我必須爲onclick添加額外的處理程序,一旦我得到負載工作。它現在像一個魅力。謝謝大家的幫助!

+1

這個問題不是放置,而是它在DOM準備好之前還是之後運行,我在我的回答中解釋過。 – LGSon