Question

目标：当按下ADD按钮时，div“addStudentClub”可见，但在按下按钮之前不应该可见。

目前无论是否按下按钮，div中的表格都会显示

这是我目前拥有的php代码。我使用了一个外部javascript文件的链接，其内容低于php。我不知道是否有任何与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';
})

我认为在按下相关按钮时，应该可以显示您想要的部分。

使用javascript隐藏div，直到按下按钮

3 个答案: