Hide div mit Javascript, bis eine Schaltfläche gedrückt wird

Question

Ziel: Wenn die Schaltfläche ADD gedrückt wird, ist das div 'addStudentClub' sichtbar, aber es sollte nicht sichtbar sein, bis die Schaltfläche gedrückt wird.

Derzeit ist die Form, in der div zeigt sich, unabhängig davon, ob die Taste

Dies ist der PHP-Code i momentan gedrückt wurde. Ich habe einen Link zu einer externen Javascript-Datei verwendet, deren Inhalt unter dem von PHP liegt. Ich weiß nicht, ob einige der Javascript-bezogenen Elemente korrekt sind - Dies ist das erste Mal, dass ich es benutze, also entschuldige ich mich für irgendwelche grellen, dummen Fehler.

//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>"; 

Dies ist die JavaScript-Datei (javascript.js)

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

Ich danke im Voraus für alle Kommentare können Sie haben :)

Answer 1

Die korrekte CSS-Stil ist display: none:

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

Answer 2

Sie könnten es in Javascript oder mit CSS tun.

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'; 
}) 

denke ich, dass sollte den Teil zu zeigen, arbeiten, die Sie wünschten, als Sie die entsprechende Taste gedrückt wird.