多步骤表单，下一步按钮不起作用

Question

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

onclick event for button:

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

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

Part of my code: Click Here.

Answer 1

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:

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

Answer 2

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:

 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>