Javascript 如何在单击时修改html表单以启用更改表单输入的按钮

我需要的是非常简单的，但是我被卡住了，我试图修改一个旧的html表单，并用一些javascript或react来增加趣味。这里我只想说，例如，原始表单（

）是

用户名：
密码：

我想添加一个按钮，点击它，表单将更改为

登录密钥：

---

隐藏用户名和密码字段。基本上用登录密钥表单替换它们。任何答案都是经过深思熟虑的。谢谢

我对javascript了解不多，但也许你可以用PHP编写类似这样的代码

<?php
    if (isset($_POST['buttonNewForm']))
    {
        echo "......your new form.......";
        echo "<form action=page.php method=post>
           <button name='buttonOldForm'>Button</button>
        </form>"
    }
    else
    {
        echo "......your old form.......";
        echo "<form action=page.php method=post>
           <button name='buttonNewForm'>Button</button>
        </form>"
    }
?>

---

您可以使用jQuery隐藏和显示来完成您想要的功能

$("#thisIsYourBtnID").click(function() {
   $("#div").hide(); //this is your div that has username and password inputs in it
   $("#div2").show(); //this is your new div showing login key form
});

我制作了一个非常简单的javascript函数，这是你想要做的吗



用户名：


密码：
登录密钥：
按钮
函数changeDisplay（）{
var div1=document.getElementById（“divNo1”）；
var div2=document.getElementById（“divNo2”）；
如果（div1.style.display=='none'）{
div1.style.display=''；
div2.style.display='none'；
}否则{
div1.style.display='none'；
div2.style.display=''；
}
}
所以，如果您想要一个javascript解决方案，那么您目前就陷入了困境。你到底坚持什么？您是否已经编写了javascript？