简单的javascript隐藏内容功能不起作用

Wil*_*iam 2 html javascript css php

我的代码出了什么问题?当我单击"显示/隐藏"按钮时,没有任何反应.

<html>
    <head>
    <title>Test</title>

    <script type="text/javascript">
        function hidecontent(){
            document.getElementById("content").style.display = "none;";
        }
    </script>

    <style type="text/css">
        #content{
            border: 1px solid #003333;
            background-color: #000033;
            color: #ffffff;
            height: 500px;
            width: 500px;
            text-align: center;
            display: block;
        }
    </style>

    </head>

    <body>
        <form>
            <input type="button" value="Hide/Show" onclick="hidecontent()" />
        </form>

        <?php
            echo '<div id="content">Hello world!</div>';
        ?>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

sus*_*ani 8

document.getElementById("content").style.display ="none;";

请不要删除分号.


Sar*_*raz 8

问题在这里:

document.getElementById("content").style.display = "none;";
                                                        ^
                    ------------------------------------|
Run Code Online (Sandbox Code Playgroud)

应该:

document.getElementById("content").style.display = "none";
Run Code Online (Sandbox Code Playgroud)

如果你真的想显示/隐藏div(如按钮value所示),你的函数应如下所示:

    function hidecontent(){
        var ds = document.getElementById("content");

        if (ds.style.display === 'block'){
           ds.style.display = 'none';
        }
        else {
           ds.style.display = 'block';
        }
    }
Run Code Online (Sandbox Code Playgroud)