Hide div using javascript until a button is pressed

Question

Goal: When the ADD button is pressed, the div 'addStudentClub' is visible, but it should not be visible until the button is pressed.

Currently the form in the div shows up regardless of whether or not the button has been pressed

This is the php code i currently have. I have used a link to an external javascript file whose content is below the php one. I don't know if any of the javascript related items are correct - This is my first time using it so I apologise for any glaring stupid errors.

//Add students to club
echo "<script type=\"text/javascript\" src=\"javascript.js\"></script>";
echo "<div class='addButton'>";    
echo "<form method='POST' action='clubInfo.php?clubid=$ClubID&user=$user'>";
echo "<input type='submit' name='submit'  value='ADD' onclick='Javascript: showaddStudentClub();'>";
echo "</form>";
if (isset($_POST['submit']))   {
     echo "Add New  Student to: " . $nameofclub . "<br>";
     echo "Please enter the following details: " . "<br>";
}
echo "</div>";

//to be hidden until button has been pressed
echo "<div id='addStudentClub' style='display: hidden'>";
... (I have removed all the php because it's very long)
echo <<<_END
    <form method='post' action='clubInfo.php?clubid=$ClubID'>$error
    <span class='fieldname'>addfname</span><input type='text'
    maxlength='30' name='addfname' value='$addfname'>
    <span class='fieldname'>addlname</span><input type='text'
    maxlength='50' name='addlname' value='$addlname'>  
    <span class='fieldname'>addyear</span><input type='integer'
    maxlength='30' name='addyear' value='$addyear'>   
_END;
     echo "<span class='fieldname'>&nbsp;</span>";
     echo "<input type='submit' value='SAVE'>";
     echo "</form>"; 
 echo "</div>";

This is the javascript file (javascript.js)

function showaddStudentClub(){
document.getElementById( 'addStudentClub' ).style.display = 'block';
} 

I thankyou in advance for any comments you may have :)

Answer 1

显示正确的CSS样式display: none ：

echo "<div id='addStudentClub' style='display: none'>";

Answer 2

You could do it in javascript or with CSS.

Javascript:

   document.addEventListener("DOMContentLoaded", function(e) { 
       document.getElementById('addStudentClub').style.display = 'none';
    });

CSS:

#addStudentClub{display:none;}

Answer 3

var theButton = document.getElementById("#IdOfTheButton");
theButton.addEventListener("click",function(){
document.getElementById('addStudentClub').style.display = 'block';
})

I think that should work to show the part that you wanted when you pressed the related button.