时间戳

首页 > 解决方案 > 如何使用下一步按钮转到下一页，稍后通过提交按钮显示结果？

javascript - 如何使用下一步按钮转到下一页，稍后通过提交按钮显示结果？

问题描述

因此，从这段代码中，我尝试让下一个按钮转到下一页，如果用户单击性别的答案是“男性”（反之亦然），该页面将显示男性部分。用户完成调查后，点击提交按钮后，只会输出主页面和男性页面的所有值。但我找不到正确的方法来做到这一点。

我在这里纠正了一些我不小心忽略的错误。但是，我仍然对下一个按钮没有转到相应的页面部分有问题。它只去男性部分，即使我也设置了去女性部分的条件。

//让我们关注男性部分...我稍后会做女性部分，谢谢！

这是主页 (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>

这是男性部分页面 (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>

这是 JavaSript 代码 (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>

标签： javascripthtml

解决方案

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

那是错的。您关闭“函数”，但在函数中具有脚本块的关闭标记。此外，这不是您声明函数的方式。

要定义事件句柄，请执行以下操作：

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

但是我希望这会失败，因为您没有正确设置按钮的 id，而且您已经在按钮的属性中设置了 onclick 处理程序，因此处理程序设置了两次。除了没有名为“next”的函数。

因此，将您的 HTML 更改为：

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

推荐阅读