Javascript显示表单

Question

我是新用户。

我有一个带有按钮的HTML文件，按下时我想在同一个div 中显示一个表单。我在点击事件中使用了document.write()，但这会使网页完全变白，并且不会在按钮所在的同一div中显示该表单。

有人知道在单击按钮时显示表单需要做什么吗？

Javascript代码：

    function addListeners()
{
        document.getElementById('button').addEventListener("click", change_border);

    function change_border()
    {
    document.write("form here");
    }

}
window.addEventListener("load", addListeners); 

HTML代码：

<button id="button" style="margin-left:5%;">Change Profile Picture</button>

• 我不希望页面刷新。

我需要学习AJAX吗？

Answer 1

这根本不需要AJAX。

您可以将表单放在div中，然后在表单上使用CSS使其隐藏。

div form#theform {
    display: none;
}

然后，您可以在单击按钮时显示表单（覆盖CSS）。

<button onclick="showForm()">Press me</button>

这是JS：

function showForm() {
    document.getElementById("theform").style.display = "block";
}

Answer 2

扎克。 document.write将清除整个页面（如果它已经加载），这是一个非常古老的命令。您可以在窗体上设置一个隐藏它的类，然后在单击该按钮时，通过Jquery或普通JS删除该类以使其可见

Answer 3

尝试将这些行添加到函数中，

function change_border()
{
document.getElementById("form1").style.display = "block";
}