可见性改变与css不工作



试图改变我的表单的可见性点击按钮,但是表单的可见性不改变点击。我不确定我做错了什么,我看过其他代码,他们也在做同样的事情。

<!DOCTYPE html>
    <!--
        To change this license header, choose License Headers in Project Properties.
        To change this template file, choose Tools | Templates
        and open the template in the editor.
     -->
     <html>
         <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width">
            <style type="text/css">
                #cardInput{
                    position: absolute;
                    bottom:400px;
                    right:700px;
                }
            </style>
        </head>
        <body>
            <form>
            <!--this is the form itself i used a div to contain  it-->
                <div id="cardInput">
                    <table>
                        <tr>
                            <td align="right">Name:</td>
                            <td align="left"><input type="text" name="name" /></td>
                        </tr>
                        <tr>
                            <td align="right">Font Size:</td>
                            <td align="left"><input type="text" name="font" /></td>
                        </tr>
                        <tr>
                            <td align="right">Colour:</td>
                            <td align="left"><input type="text" name="colour" /></td>
                        </tr>
                        <tr>
                            <td align="right"></td>
                            <td align="left"><button type="button" onclick="makeCard()">Make Your Card</button></td>
        <!--on submit i want it to run the function that hides the form-->
                        </tr>
                    </table>
                </div>
            </form>
            <script>
                function makeCard(){
                    //this is the line that isnt working 
                    document.getElementsByTagName("form").style.visibility = "hidden";
                }
             </script>
        </body>
    </html>

感谢您的帮助。

抱歉,我很少使用这种格式。

document.getElementsByTagName("form")

总是返回在页面中找到的表单标记数组。所以你应该用

function makeCard(){
 document.getElementsByTagName("form")[0].style.visibility = "hidden";
                   }

参见demo http://jsfiddle.net/t2YLa/

在form id = "form"中添加id,并在javascript中像这样调用:.style . getelementbyid("形式")。