0

I actually need help to correct my code. I have watched a video from youtube but in that video, he use checkbox instead of button. so i'm having problem with the if else statement of the javascript. i have already checked the previous post that have same problem but couldn't find the one that can solve my problem. please help me. Thank you so much.

<!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">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td height="34">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</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>
Improve this question
2
  • Do you wan to get toggle effect here, i.e on first click form will get displayed and on second click it will get hidden and so on?? Commented Aug 24, 2016 at 4:02
  • getElementByClassName is not a function. getElementsByClassName is and returns a node list. Access the first element with [0]. You can also use visibility CSS attribute Commented Aug 24, 2016 at 4:03

4 Answers 4

Reset to default
1

You can target the form using id and add remove class to show hide the form.

<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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Given that you're hiding the element with a class, you can show and hide it by removing and re-adding the class. The classList.toggle method* will do that:

function hide(id) { var el = document.getElementById(id); if (el && el.classList) { el.classList.toggle('hidden'); } }
<style type="text/css"> .hidden { display: none; } </style> <body> <input id="foo"><br> <button onclick="hide('foo')">Hide input</button> </body>

* Note that the reference to MDN includes a polyfill for Element.classList to support older browsers.

Improve this answer

5 Comments

I don't think setting .style.display to an empty string will show the element, because it is currently hidden via a class.
@nnnnnn—yep, oops…
P.S. Regarding the note about the ternary operator possibly being a maintenance issue, it's a matter of opinion, but personally I think it makes the code clearer for this sort of thing: it lets you read the code as "set that property to [some computed value]", as compared to "evaluate that property and do x else y", where it then takes an extra moment to realise that actually x and y are just setting the same property. The fact that it also happens to be shorter is just a bonus.
@nnnnnn—yep, all fair comment but removed all that anyway. ;-)
Cool. .toggle() also makes the intent clear immediately. Time to vote...
0

how about this... ??

function showHide() { var button = document.getElementById("butt"); var hiddeninput = document.getElementsByClassName("hidden"); var form1 = document.getElementById("form1"); if (form1 && form1.style.display=="none") { form1.style.display = "block"; } else { form1.style.display = "none"; } }
<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 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">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td height="34">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</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" style="display: none;"> <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>

Improve this answer

1 Comment

This is different to the OP, where the element is hidden with a class, not the display property. While it works, the different approach should be explained and the pros and cons vs the OP discussed.
-1

You can use jQuery for that.

For hiding do that in the onClick event on the button.

$( ".target" ).hide();

For showing 

$( ".target" ).show();
Improve this answer

2 Comments

But what's the point of jQuery when the OP is using vanilla JS and makes no mention of it?
If you check the code shown in the question, the OP already has code to handle the actual hide and show, but seems to be having trouble running that code at the appropriate moment.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.