2017-02-24 8 views
0

現在、MOSS 2007のページ用のフォームを作成しています。政府の制約のため、CSS3とjQueryの代わりに多くのJavaScriptを使用します。私はC#の世界から来て、JavaScriptはやや新鮮なものです。DIVの内容をDIVの内容に置き換えます。JavaScript(No jQuery)

私の現在の目的は、静止div要素の内容をページ上に隠された別の内容に置き換えることです。私はこのページでこの残っている問題だけを解決しようとしている私の知恵末に来ている。現在、私は単純な(擬似:doc.getbyid(id).innerhtml = newdiv)divの内容を置き換えるために使用しています、今私の2つの理論は、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

ここで問題となるのは、それを処理してサーバ上で取得することです。コンピュータを稼働させるためにも、雇用日から1ヶ月もかかりました。私が実際にコーディングを開始するまでにさらに3ヶ月。まだ私は必要なすべてのツールを持っていない、VS。サーバー上でjQueryを取得するまでにどれくらいの時間がかかるか分かりません。 – lxxtacoxxl

答えて

1

あなたが私が

にその要素をターゲットにする前に、DOMの準備ができているので、

  1. 変更innerHtml

  2. innerHTMLloadハンドラを追加働いていない理由は2つのことがあります。不要なdocument.getElementById()ステートメントを削除し、01を呼び出すことも選択しました問題は、スクリプト自体の配置とした

    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機能にPARAMの問題を持っていた、それだけでidあるべきとき、あなたは、var idを集めています。 var eIDsには=がありませんでしたので、あなたの配列は決して変数で宣言されませんでした。上記の紳士はまだ間違ったコードを使用しています。クリックハンドラはありますか?私たちはそれを見ることができますか?

0

その最初の項目のインデックスを持つ機能。体の終わりに移動し、魅力的に働いた! innerHTMLやeidとvar idの等号などの小さな問題はほとんど見過ごされていませんでした。もちろん、負荷をかけてからonclickのハンドラを追加する必要がありました。今は魅力のように働いています。そんな偉大な助けをしてくれてありがとう!

+1

問題はプレースメントではなく、DOMが準備ができている前に実行されたか後に実行されるかです。 – LGSon

関連する問題