添加類和/或刪除類不工作

我正在嘗試構建一個多階段表單，連接到這個表單將會突出顯示用戶所在步驟的進度列表。然而，我的問題是讓addClass和removeClass函數根本無法正常工作，並且想知道這有什麼可能的錯誤。
包括請找到我工作的例子jsfiddle。 https://jsfiddle.net/yck3oae3/添加類和/或刪除類不工作

<progress id="progressBar" value="0" max="100" style="width: 250px;"></progress> 
        <h3 id="status1" class="active">Select Tile Location</h3> 
        <h3 id="status2">Phase 2 of 3</h3> 
         <h3 id="status3">Phase 3 of 3</h3> 
        <form id="multiphase" onSubmit="return false"> 
         <div id="phase1"> 
          First Name: <input id="firstname" name="firstname"><br> 
          Last Name: <input id="lastname" name="lastname"><br> 
          <button onClick="processPhase1()">Next</button> 
         </div> 
         <div id="phase2"> 
         Gender: <select id="gender" name="gender"> 
         <option value=""></option> 
         <option value="m">Male</option> 
         <option value="f">Femaile</option> 
         </select> 
         <button onClick="processPhase2()">Continue</button> 
        </div> 
        <div id="phase3"> 
         Country: <select id="country" name="country"> 
          <option value="Narnia">Narnia</option> 
          <option value="Westeros">Westeros</option> 
          <option value="Mordor">Mordor</option> 
         </select> 
         <button onClick="processPhase3()">Continue</button> 
        </div> 
        <div id="show_all_data"> 
         First Name: <span id="display_fname"></span><br> 
         Last Name: <span id="display_lname"></span><br> 
         Gender: <span id="display_gender"></span><br> 
         Country: <span id="display_country"></span><br> 
         <button onClick="submitForm()">Submit Data</button> 
        </div> 
        </form> 

var fname, lname, gender, country; 
function _(x){ 
    return document.getElementById(x); 
} 
function processPhase1(){ 
    fname = _("firstname").value; 
    lname = _("lastname").value; 
    if(fname.length > 2 && lname.length > 2){ 
     _("phase1").style.display = "none"; 
     _("phase2").style.display = "block"; 
     _("progressBar").value = 33; 
     //_("status1").removeClass("active"); 
     _("status2").addClass("active"); 
    } else { 
     alert("Please fill in the fields"); 
    } 
} 

function processPhase2() { 
    gender = _("gender").value; 
    if(gender.length > 0) { 
     _("phase2").style.display = "none"; 
     _("phase3").style.display = "block"; 
     _("progressBar").value = 66; 
     _("status2").style.background = "none"; 
     _("status3").style.background = "blue"; 
    } 
    else { 
     alert ("Please chose your gender"); 
    } 
} 

function processPhase3() { 
    country = _("country").value; 
    if (country.length > 0) { 
     _("phase3").style.display = "none"; 
     _("show_all_data").style.display = "block"; 
     _("display_fname").innerHTML = fname; 
    } 
    else { 
     alert("Please chose your country"); 
    } 
} 

function submitForm() { 
    _("multiphase").method = "post"; 
    _("multiphase").action = "my_parser.php"; 
    _("multiphase").submit(); 
}

來源

2016-01-11 ChriChri

你有沒有設置'_'作爲jQuery（或'''）的別名，還是不同的庫？ –

_是以下函數的一部分：函數_（x）{ \t return document.getElementById（x）; } – ChriChri

addClass和removeClass是JQuery的功能，並且需要jQuery庫。

$("#status1").removeClass("active"); 
$("#status2").addClass("active");

JSFiddle

要做到這一點，而不JQuery的，你可以做

document.getElementById("whatever").className = "";

或者，更具體的答案：

_("status1").className = "active"; 
_("status2").className = "";

Other JSfiddle

來源

2016-01-11 23:54:27 GAntoine

兩者似乎都很好。：）非常感謝你的幫助。 – ChriChri

添加類和/或刪除類不工作

回答

相關問題