多步驟表單，下一步按鈕不起作用

Question

“繼續”到表單的下一步將不起作用。

按鈕的onclick事件：

<button onclick="processPhase1()">Continue</button>

功能：

function processPhase1() {
    ("phase1").style.display = "none";
    ("phase2").style.display = "block";
}

表格示例（顯示我的結構）：

<form>
    <div id="phase1">
        <!-- Some Input field -->
        <!-- Some Input field -->
            <button onclick="processPhase1()">Next Step</button>
    </div>
    <div id="phase2">
        <!-- Some Input field -->
        <!-- Some Input field -->
    </div>
</form>  

當然，當我嘗試進行下一步時，不會顯示第二階段，因為我有合適的CSS。 問題是，它不會進行下一步。

如果您想看一下我的代碼，請告訴我。

編輯：對不起，更不用提了。 我正在使用

function _(x) {
                return document.getElementById(x);  
              }  

然后將_放在（“ phase1”），（“ phase2”）的前面，但仍然無法正常工作

我的代碼的一部分： 單擊此處。

Answer 1

如果button在表單內（根據您的代碼未知），並且未指定按鈕的type （如上所述），則默認將submit並提交該表單。 您的頁面可能只是在表單提交時重新加載。

最簡單的解決方法是return false; 處理完點擊后：

<button onclick="processPhase1(); return false;">Next Step</button>

Answer 2

您將“ _”用作getElementById的替代品似乎不必要地冒險與下划線庫發生沖突（或至少造成混淆），但它確實起作用：

 function _(x) { return document.getElementById(x); } function processPhase1() { _("phase1").style.display = "none"; _("phase2").style.display = "block"; } 

 <form> <div id="phase1"> This is phase 1 <button onclick="processPhase1()">Next Step</button> </div> <div id="phase2" style="display:none"> This is phase 2 </div> </form>