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

"Continue" to next step of the form won't work.

onclick event for button:

按钮的onclick事件:

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

Function:

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

Example form (to display my structure):

示例表单(显示我的结构):

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

Of course, the 2nd phase isn't displayed when I'm trying to go to next step, since I've the suitable css for it. The problem is, it wont go to next step.

当然,当我试图进入下一步时,第二阶段不显示,因为我有适合它的css。问题是,它不会进入下一步。

If you want to take a look in my code just let me know.

如果您想查看我的代码,请告诉我。

EDIT: Sorry not to mention it earlier. I'm using

编辑:抱歉,不要提前提及。我正在使用

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

and then putting _ infront of the ("phase1"),("phase2") but it still won't work

然后把_(“阶段1”)的前面,(“阶段2”),但它仍然无法正常工作

Part of my code: Click Here.

2 个解决方案

#1

Your use of "_" as a stand-in for getElementById seems to needlessly risk conflict (or at least confusion) with the underscore library, but it does work:

您使用“_”作为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>

#2

If the button is inside a form (unknown based on your code), and the type of the button is not specified (as above), it will default to submit and submit that form. It's possible your page is just reloading on the form submission.

如果按钮位于表单内(基于您的代码未知),并且未指定按钮类型(如上所述),则默认提交并提交该表单。您的页面可能只是在表单提交时重新加载。

The simplest fix is to return false; after processing the click:

最简单的解决方法是返回false;处理完点击后:

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

#1