css无法正常工作时可见性发生变化

时间:2014-07-26 05:41:24

标签: 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>

非常感谢任何帮助。

很抱歉代码编写不当我很少使用它。

2 个答案:

答案 0 :(得分:0)

document.getElementsByTagName("form")

始终返回页面中找到的表单标签数组。所以你应该像

一样使用它
function makeCard(){
 document.getElementsByTagName("form")[0].style.visibility = "hidden";
                   }

参见演示http://jsfiddle.net/t2YLa/

答案 1 :(得分:0)

  

在标记内添加表单id =“form”的id,并在javascript中调用,如下所示:   document.getElementById(“form”)。style.visibility =“hidden”;