Javascript 如何仅在单击按钮时显示带有表单的div？

我在一个div中有一个表，其中包含一个供用户填写的表单。div上方有一个按钮，上面写着“客户信息”。只有当客户想填写信息时，我才想出示表格。这个想法是，如果他们想填写表格，他们可以点击按钮，表格就会出现在下面。这些部分有很多，所以我只想让客户看到他们想看到的内容。下面是一个例子

<input type="button" value="Customer Info" onClick="">
<div>
<form>
<table>
<tr>
<td>Name:<input type="text" value="" id="name" name="name"></td>
</tr>
</table>
</div>

姓名：

---

我的问题是如何编写一个简单的javascript函数，在单击显示和隐藏Div的按钮时进行操作？表单仍将隐藏在那里，值将为空。

您可以使用

onClick

事件来执行此操作：

HTML:

<button id="some_id">Hide div</button>

<form id="some_form">

<form>

<script type="text/javascript">
    var theButton = document.getElementById('some_id');
    
    theButton.onclick = function() { 
        document.getElementById('some_form').style.visibility='hidden';   
    }
    
</script>
   

隐藏div

javascript:

<button id="some_id">Hide div</button>

<form id="some_form">

<form>

<script type="text/javascript">
    var theButton = document.getElementById('some_id');
    
    theButton.onclick = function() { 
        document.getElementById('some_form').style.visibility='hidden';   
    }
    
</script>
   

var theButton=document.getElementById（'some_id'）；
theButton.onclick=function（）{
document.getElementById（'some_form'）.style.visibility='hidden'；
}
内联javascript被认为是不好的做法

例如，
onClick=”“

用这样的东西代替

<input id="info" type="button" value="Customer Info">
<div id="myDiv">
    <form>Name:
        <input type="text" value="" id="name" name="name">
        </input>
    </form>
</div>

var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");

function show() {
    myDiv.style.visibility = "visible";
}

function hide() {
    myDiv.style.visibility = "hidden";
}

function toggle() {
    if (myDiv.style.visibility === "hidden") {
        show();
    } else {
        hide();
    }
}

hide();

button.addEventListener("click", toggle, false);

在

$（“#音乐”）。单击（功能（）{
$（#musicinfo”）.show（“slow”）；
});

您可以更改效果，如切换、fadeToggle代替show…
此问题未显示任何研究成果。做家庭作业很重要。告诉我们你发现了什么，为什么它不能满足你的需要。这表明你花了时间来帮助自己，这使我们不必重复显而易见的答案，而且最重要的是，这有助于你得到更具体、更相关的答案。这是一个入门级的问题，我需要帮助，考虑谁帮助你评论。如果只是简单地通过这个问题会更快。请注意张贴的所有有用的答案。还要注意的是，他们之间有一些争论，这就构成了这个问题本身的价值。好吧，但说真的，你是在推荐在线事件处理程序吗？考虑到问题的简单性，您可能还需要添加
脚本
标记。还有，
onclick
还有必要吗？@DavidThomas更新，只为你；）为什么不使用带有简单切换的
toggle（）
函数呢<代码>myDiv.style.visibility=myDiv.style.visibility=='visible'？'隐藏'：'可见'无特殊原因，除非OP不知道如何执行这些操作。对于没有经验的用户来说，如果没有其他功能，则不清楚速记，用户可能会改变切换的想法，并且他们可以轻松地使用所有3个功能。这个例子只是众多解决方案中的一个。