ボタンが押されるまでdivを非表示にします

Question

目的：ADDボタンを押すとdiv 'addStudentClub'が表示されますが、ボタンが押されるまで表示されません。

は、現在のdivのフォームは、これは私が現在持っているPHPコードであるにかかわらず、ボタンが押されたか否か

の現れ。私は、その内容がPHP 1の下にある外部のjavascriptファイルへのリンクを使用しました。私はjavascript関連の項目が正しいかどうかわかりません - これは私が初めてそれを使用しているので、愚かなエラーを謝っています。あなたが持つかもしれないコメントを事前に

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

これはjavascriptのファイル（javascript.jsを）です

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

私はありがとうは:)

Answer 1

正しいCSSスタイルがdisplay: noneです：

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

Answer 2

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

私はそれはあなたが関連するボタンを押したとき、あなたが望んでいた部分を表示するように動作するはずだと思います。