可见性更改，css不起作用_Css

可见性更改，css不起作用

css

可见性更改，css不起作用,css,Css,尝试在单击按钮时更改窗体的可见性，但是窗体的可见性在单击时不会更改。我不确定我做错了什么，我看过其他代码，他们也在做同样的事情 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates

尝试在单击按钮时更改窗体的可见性，但是窗体的可见性在单击时不会更改。我不确定我做错了什么，我看过其他代码，他们也在做同样的事情

<!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";
                   }

见演示

在标签内的form id=form中添加id，并按如下方式调用javascript： document.getElementByIdform.style.visibility=隐藏

getElementsByTagName（顾名思义）返回数组中多个节点的节点列表，因此必须将其用作文档。getElementsByTagName[0]。style.visibility=hidden；为了让线路正常工作@哈利，非常感谢你！它起作用了：很高兴知道它帮助了mate。另外一个注意事项是数组索引，您可能已经猜到了[0]。因此，如果您有多个表单元素，则必须修改该数字以针对所需的元素，或者如果希望影响所有表单元素，则必须创建一个循环。