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

【问题标题】：Hide div using javascript until a button is pressed使用javascript隐藏div，直到按下按钮
【发布时间】：2016-07-24 13:52:21
【问题描述】：

目标：当按下 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';
}

我提前感谢您提供的任何 cmets :)

【问题讨论】：

我认为使用 jQuery 会更容易。你试过吗？
可能是这样的：stackoverflow.com/questions/12237163/…（谷歌：jquery show hide div）
哇。很多回声..听说过heredocs..
我很欣赏 cmets，但有人告诉我必须使用 javascript

标签： javascript php

【解决方案1】：

正确的 CSS 样式是display: none:

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

【讨论】：

thnakyou！按下按钮时如何让它显示？
你的 JavaScript 应该可以做到这一点。

【解决方案2】：

您可以使用 javascript 或 CSS 来实现。

Javascript：

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

CSS：

#addStudentClub{display:none;}

【讨论】：

【解决方案3】：

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

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

【讨论】：