多步骤表单，下一步按钮将无法正常工作

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”），但它仍然不起作用

我的部分代码：Click Here.

Answer 1

如果button位于表单内（基于您的代码未知），并且未指定按钮的type（如上所述），则默认为submit并且提交该表格。您的页面可能只是在表单提交上重新加载。

最简单的解决方法是在处理点击后return false;：

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

Answer 2

你使用＆＃34; _＆＃34;作为getElementById的替身，似乎不必要地冒险与下划线库发生冲突（或至少是混淆），但确实有效：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;