DIV kontentini DIV tarkibi bilan almashtirish JavaScript (jQuery yo'q)

Hozirda MOSS 2007-da bir sahifa formasini ustida ishlayapman va hukumat cheklovlari tufayli CSS3 va jQuery o'rniga juda ko'p JavaScript-ni ishlatishga majbur qilaman. Men C# dunyosidan kelib, JavaScript hali ham yangi.

Mening joriy maqsad - bu sobit div elementining tarkibini sahifada yashirin bo'lgan boshqa narsalar bilan almashtirish. Men bu sahifada faqat qolgan muammolarni hal qilishga urinib ko'rdim. Hozirgi kunda men oddiy (pseudo: doc.getbyid (id) .innerhtml = newdiv) divning tarkibini o'zgartirish uchun foydalanmoqdaman, endi ikkita nazariyam quyidagicha: 1) onclick hodisasi funksiyani chaqirmaydi yoki 2 ) almashtirish faqat ishlamaydi.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

(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">
                
  • Contact Information
  • Request Type
  • Details
      <div id="currentSlide" class="fsDiv"></div>
                <div id="contactSlide" class="fsDiv">
                

Contact Information

                

Please supply your contact information.

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

Request Type

                

What type of request would you like to make?

                Type: 
                <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">
                

Permissions Request

                

Please supply details about your request.

                <input type="text" name="permName" placeholder="Last Name, First Name" />
                Permission Level Needed: 
                <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">
                

Report An Issue

                

Please provide some details about the issue.

                <input type="text" name="bugLocation" placeholder="Link To Page" />
                <input type="text" name="bugDescription" placeholder="What Is Happening?" />
                Severity: 
                


                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="submit" name="submit" class="submit action-button" value="Submit" />
                </div>
        </div>
</div> </div>

Menimcha, ichki htmlni bor-zarda saqlash va kerak bo'lganda uni belgilashdan iborat bo'lgan boshqa narsa. Iltimos yordam bering!

0
Shuningdek, men ham hukumat mijozlari uchun ishlayman - serveringizda jquery-ni joylashtirishga hech qanday cheklov bo'lmasligi kerak; uni tashqi manbadan ushlash, yo'q bo'lsa-yo'q.
qo'shib qo'ydi muallif Chris Cousins, manba
Shuningdek, men ham hukumat mijozlari uchun ishlayman - serveringizda jquery-ni joylashtirishga hech qanday cheklov bo'lmasligi kerak; uni tashqi manbadan ushlash, yo'q bo'lsa-yo'q.
qo'shib qo'ydi muallif Chris Cousins, manba
Bu erda odamlar bu muammolarni hal qilishni va uni serverda olishni istaydilar. Menga ishlaydigan kompyuterni olish uchun menga bir oy kerak bo'ldi. Men bundan uch oy oldin kodlashni boshlagan edim. Menga kerak bo'lgan barcha vositalar, hatto VS. Serverda jQuery olish uchun qancha vaqt ketishini bilmayman.
qo'shib qo'ydi muallif lxxtacoxxl, manba
Bu erda odamlar bu muammolarni hal qilishni va uni serverda olishni istaydilar. Menga ishlaydigan kompyuterni olish uchun menga bir oy kerak bo'ldi. Men bundan uch oy oldin kodlashni boshlagan edim. Menga kerak bo'lgan barcha vositalar, hatto VS. Serverda jQuery olish uchun qancha vaqt ketishini bilmayman.
qo'shib qo'ydi muallif lxxtacoxxl, manba

8 javoblar

Sizning kodingiz yaxshi, lekin innerHtmlni innerHTML bilan o'zgartiring, JavaScript JavaScript-ni katta-kichikligi sezgir.

(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;
}
1
qo'shib qo'ydi
C # -ga ishora qilganingiz uchun tashakkur. Men JavaScript-ni yaxshi deb o'ylayman. Biroq, afsuski, bu ham ishlamadi. Sahifa hali bo'sh div bilan yuklaydi, shuning uchun keyingi tugma yo'q, shuning uchun bu erda jQuery holda ishlashni qanday qilib olishim mumkin, shuning uchun men keladigan keyingi savolga o'tishim mumkin. Iltimos, document.ready va bog'liq hodisalarni formatlashlar kabi narsalarni yodda tuting. Bundan tashqari, $ ga yo'l berilmaydi.
qo'shib qo'ydi muallif lxxtacoxxl, manba

Sizning kodingiz yaxshi, lekin innerHtmlni innerHTML bilan o'zgartiring, JavaScript JavaScript-ni katta-kichikligi sezgir.

(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;
}
1
qo'shib qo'ydi
C # -ga ishora qilganingiz uchun tashakkur. Men JavaScript-ni yaxshi deb o'ylayman. Biroq, afsuski, bu ham ishlamadi. Sahifa hali bo'sh div bilan yuklaydi, shuning uchun keyingi tugma yo'q, shuning uchun bu erda jQuery holda ishlashni qanday qilib olishim mumkin, shuning uchun men keladigan keyingi savolga o'tishim mumkin. Iltimos, document.ready va bog'liq hodisalarni formatlashlar kabi narsalarni yodda tuting. Bundan tashqari, $ ga yo'l berilmaydi.
qo'shib qo'ydi muallif lxxtacoxxl, manba

Nima uchun u ishlamayotgan 2 ta narsa bor

  1. innerHTML kodini o'zgartirish uchun innerHTML
  2. load ishlovchilarni qo'shing, shuning uchun DOM uning elementlarini belgilashdan oldin tayyor

Bundan tashqari, keraksiz document.getElementById() iborasini qo'yishni tanladim va nextSlide funktsiyasini birinchi element indeksiga aylantirishni xohladim

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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">
                
  • Contact Information
  • Request Type
  • Details
      <div id="currentSlide" class="fsDiv"></div>
                <div id="contactSlide" class="fsDiv">
                

Contact Information

                

Please supply your contact information.

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

Request Type

                

What type of request would you like to make?

                Type: 
                <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">
                

Permissions Request

                

Please supply details about your request.

                <input type="text" name="permName" placeholder="Last Name, First Name" />
                Permission Level Needed: 
                <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">
                

Report An Issue

                

Please provide some details about the issue.

                <input type="text" name="bugLocation" placeholder="Link To Page" />
                <input type="text" name="bugDescription" placeholder="What Is Happening?" />
                Severity: 
                


                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="submit" name="submit" class="submit action-button" value="Submit" />
                </div>
        </div>
</div> </div>

1
qo'shib qo'ydi

Nima uchun u ishlamayotgan 2 ta narsa bor

  1. innerHTML kodini o'zgartirish uchun innerHTML
  2. load ishlovchilarni qo'shing, shuning uchun DOM uning elementlarini belgilashdan oldin tayyor

Bundan tashqari, keraksiz document.getElementById() iborasini qo'yishni tanladim va nextSlide funktsiyasini birinchi element indeksiga aylantirishni xohladim

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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">
                
  • Contact Information
  • Request Type
  • Details
      <div id="currentSlide" class="fsDiv"></div>
                <div id="contactSlide" class="fsDiv">
                

Contact Information

                

Please supply your contact information.

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

Request Type

                

What type of request would you like to make?

                Type: 
                <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">
                

Permissions Request

                

Please supply details about your request.

                <input type="text" name="permName" placeholder="Last Name, First Name" />
                Permission Level Needed: 
                <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">
                

Report An Issue

                

Please provide some details about the issue.

                <input type="text" name="bugLocation" placeholder="Link To Page" />
                <input type="text" name="bugDescription" placeholder="What Is Happening?" />
                Severity: 
                


                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="submit" name="submit" class="submit action-button" value="Submit" />
                </div>
        </div>
</div> </div>

1
qo'shib qo'ydi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

(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">
                
  • Contact Information
  • Request Type
  • Details
      <div id="currentSlide" class="fsDiv"></div>
                <div id="contactSlide" class="fsDiv">
                

Contact Information

                

Please supply your contact information.

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

Request Type

                

What type of request would you like to make?

                Type: 
                <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">
                

Permissions Request

                

Please supply details about your request.

                <input type="text" name="permName" placeholder="Last Name, First Name" />
                Permission Level Needed: 
                <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">
                

Report An Issue

                

Please provide some details about the issue.

                <input type="text" name="bugLocation" placeholder="Link To Page" />
                <input type="text" name="bugDescription" placeholder="What Is Happening?" />
                Severity: 
                


                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="submit" name="submit" class="submit action-button" value="Submit" />
                </div>
        </div>
</div> </div>

id kimligi kodini id bo'lishi kerak bo'lsa, siz nextSlide funktsiyasidagi parametr bilan bog'liq muammoga duch keldingiz. va siz var eIDs kodi = yo'qligida sizning katalogingiz o'zgaruvchida hech qachon e'lon qilinmagan. yuqorida turgan janob hamon noto'g'ri koddan foydalanmoqda. Sizda bir marta bosish operatori bormi? buni biz ko'rsak bo'ladimi?

0
qo'shib qo'ydi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

(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">
                
  • Contact Information
  • Request Type
  • Details
      <div id="currentSlide" class="fsDiv"></div>
                <div id="contactSlide" class="fsDiv">
                

Contact Information

                

Please supply your contact information.

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

Request Type

                

What type of request would you like to make?

                Type: 
                <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">
                

Permissions Request

                

Please supply details about your request.

                <input type="text" name="permName" placeholder="Last Name, First Name" />
                Permission Level Needed: 
                <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">
                

Report An Issue

                

Please provide some details about the issue.

                <input type="text" name="bugLocation" placeholder="Link To Page" />
                <input type="text" name="bugDescription" placeholder="What Is Happening?" />
                Severity: 
                


                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="submit" name="submit" class="submit action-button" value="Submit" />
                </div>
        </div>
</div> </div>

id kimligi kodini id bo'lishi kerak bo'lsa, siz nextSlide funktsiyasidagi parametr bilan bog'liq muammoga duch keldingiz. va siz var eIDs kodi = yo'qligida sizning katalogingiz o'zgaruvchida hech qachon e'lon qilinmagan. yuqorida turgan janob hamon noto'g'ri koddan foydalanmoqda. Sizda bir marta bosish operatori bormi? buni biz ko'rsak bo'ladimi?

0
qo'shib qo'ydi

Muammo skriptning o'zi joylashtirilgan edi; tananing oxiriga ko'chib o'tdi va jozibasi kabi ishladi! InnerHTML kabi kichik masalalar va eids va var identifikatorlari uchun tenglik belgisi juda kam miqdorda edi; Albatta, men yuklashga ega bo'lganimdan keyin onclick uchun qo'shimcha ishlovchilarni qo'shishga to'g'ri keldi. Endi u jozibasi kabi ishlaydi. Barchangizga katta yordam uchun rahmat!

0
qo'shib qo'ydi
Muammoni joylashtirish emas, balki DOM tayyor bo'lganidan oldin yoki keyin ishlayotganmi yoki javobimga izoh berdim.
qo'shib qo'ydi muallif LGSon, manba

Muammo skriptning o'zi joylashtirilgan edi; tananing oxiriga ko'chib o'tdi va jozibasi kabi ishladi! InnerHTML kabi kichik masalalar va eids va var identifikatorlari uchun tenglik belgisi juda kam miqdorda edi; Albatta, men yuklashga ega bo'lganimdan keyin onclick uchun qo'shimcha ishlovchilarni qo'shishga to'g'ri keldi. Endi u jozibasi kabi ishlaydi. Barchangizga katta yordam uchun rahmat!

0
qo'shib qo'ydi
Muammoni joylashtirish emas, balki DOM tayyor bo'lganidan oldin yoki keyin ishlayotganmi yoki javobimga izoh berdim.
qo'shib qo'ydi muallif LGSon, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb