我实际上需要帮助来纠正我的代码。我看过 YouTube 上的一个视频，但在该视频中，他使用复选框而不是按钮。所以我对 javascript 的 if else 语句有问题。我已经检查过上一篇有同样问题的帖子，但找不到可以解决我的问题的帖子。请帮我。非常感谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/tabMenu.css" rel="stylesheet" type="text/css" />
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide()
{
var button = document.getElementById("butt");
var hiddeninput = document.getElementByClassName("hidden");
if(button.click)
{
hiddeninput.style.display = "block";
}
else
{
hiddeninput.style.display = "none";
}
}
</script>
</head>
<body>
<div id="navbar">
<div id="holder">
<ul>
<li><a href="employee.php" id="onlink">Employer Database</a></li>
<li><a href="companypresence.php">Company Presence</a></li>
<li><a href="companypromotion.php">Company Promotion</a></li>
</ul>
</div><!--end of holder div -->
</div><!--end of navbar div -->
</br>
<p id="p1"><u>Employer List</u></p>
</br>
<table width="1345" height="113" border="1" id="table1">
<tr id="tr1">
<th width="46" height="35" scope="col">No.</th>
<th width="93" scope="col">Title</th>
<th width="157" scope="col">First Name</th>
<th width="171" scope="col">Last Name</th>
<th width="128" scope="col">Position</th>
<th width="130" scope="col">Sector</th>
<th width="178" scope="col">Company Name</th>
<th width="107" scope="col">Country</th>
<th width="97" scope="col">Email</th>
<th width="78" scope="col">Phone</th>
<th width="84" scope="col">Action</th>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()"/>
<br/>
<br/>
<br/>
<form id="form1" action="add_employer.php" method="post" class="hidden">
<p align="left"><u><strong>Add Employer Detail</strong></u></p>
<br/>
<br/>
<TABLE cellpadding="5" cellspacing="2" align="center">
<TR>
<td><strong>Title </strong></td>
<td><strong>:
<input name="title" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>First Name </strong></td>
<td><strong>:
<input name="first_name" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>Last Name</strong></td>
<TD><strong>:
<input name="last_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Position</strong></td>
<TD><strong>:
<input name="position" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Sector</strong></td>
<TD><strong>:
<input name="sector" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Company Name</strong></td>
<TD><strong>:
<input name="company_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Country</strong></td>
<TD><strong>:
<input name="country" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Email</strong></td>
<TD><strong>:
<input name="email" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Phone</strong></td>
<TD><strong>:
<input name="phone" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Action</strong></td>
<TD><strong>:
<input name="action" value="" type="text" size="50" maxlength="50">
</strong>
<input name="addbutton" type="button" value="Add Employer"/>
<input name="clear" type="button" value="Clear"/>
</TD>
</TR>
</TABLE>
<br/>
<br/>
</form>
</body>
</html>
最佳答案
您可以使用 id 定位 form 并添加删除 class 以显示隐藏表单。
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide() {
var hiddeninput = document.getElementById("form1");
if (hiddeninput.classList.contains("hidden")) {
hiddeninput.classList.remove("hidden");
}
else {
hiddeninput.classList.add("hidden");
}
}
</script>
关于javascript - 使用 JavaScript 单击按钮时如何隐藏/显示表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39114192/