如何使用下一步按钮 go 到下一页，然后通过提交按钮显示结果？

Question

So, from this code, I tried to make the next button go to the next page that will display the male section if users clicked on the answer is 'male' for gender (vice versa). After user complete the survey, then only all the values from main page and male page will output after clicking the submit button. But I can't find the correct way to do it.

I have corrected some mistakes here which I accidentally overlook. But, I still have problem on the next button not going to the appropriate page section. It only go to male section eventho i put the condition to go to female section as well.

//Let's focus on the male part... I will do the female part later, thanks!

This is the Main page (mainsection.html)

<form  id="form1">
    <p>Gender</p>
    <label><input type="radio" name="gender" id="male" value="Male">Male</label>
    <label><input type="radio" name="gender" id="female" value="Female">Female</label>
    <button id= "next" value="Next">Next</button>
</form>

    <script type="text/javascript" src="script.js"></script>

This is the Male section page (malesection.html)

<form  id="form1">
    <p>Height</p>
    <label><input type="radio" name="height" id="short" value="Short"><165cm</label>
    <label><input type="radio" name="height" id="average" value="Average">165cm-175cm</label>
    <label><input type="radio" name="height" id="tall" value="Tall">>175cm</label>

    <p>Wrist Size</p>
    <label><input type="radio" name="wrist" id="small" value="small"><15cm</label>
    <label><input type="radio" name="wrist" id="medium" value="medium">15cm-15.6cm</label>
    <label><input type="radio" name="wrist" id="large" value="large">>15.6cm</label>

    <button type="submit" value="Submit">Submit</button>
    <p id="ans"></p>
    <p id="ans2"></p>

</form>

    <script type="text/javascript" src="script.js"></script>

This is the JavaSript code (script.js)

<script>
    document.getElementById("form1").onsubmit=function() {

    var x = document.getElementById("ans");
    var y = document.getElementById("ans2");
    var m = document.getElementById("male");
    var f = document.getElementById("female");
    var t = document.getElementById("teen");
    var a = document.getElementById("adult");
    var s = document.getElementById("senior");
    var mHS = document.getElementById("short");
    var mWS = document.getElementById("small");

   //Next button condition
   document.getElementById("next").onclick = function()
   {
     if(m.checked)
        location.href = "malesection.html";

     else if(f.checked)
        location.href = "femalesection.html";
   }

     if(t.checked){x.innerHTML = "You are a Teen."}
       else if(a.checked){x.innerHTML = "You are an Adult."}
           else if(s.checked){x.innerHTML = "You are a Senior."}

     if(m.checked){
       if(mHS.checked){
          if(mWS.checked)
             {y.innerHTML = "You are a male with short height and small body 
                             frame. Thus, you have an Ectomorph body type. Choose 
                             clothes that neatly skim the body."}
       }
    }
    return false;
}
</script>

Answer 1

    <script type="text/javascript">
        document.getElementById("next").onclick = next() {
        location.href = "malesection.html";
    </script>
    };

That is wrong. You close the "function" but have the close tag for the script block within the function. Also, that's not how you declare a function.

To define an event handle, you do the following:

document.getElementById('next').onclick = function(e)
{
  location.href = "malesection.html";
};

But I expect that will fail as you haven't set the id of the button correctly, also you have set the onclick handler in the attributes of the button, so the handler is set twice. Except that there is no function called "next".

So, change your HTML to something like:

<button id="next">Next</button>