Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Simple javascript hide content function isn't working

What is wrong with my code? When I click the Show/Hide button nothing happens.

<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>
like image 596
William Avatar asked Aug 26 '26 08:08

William


2 Answers

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

please remove semicolon after none.

like image 101
sushil bharwani Avatar answered Aug 28 '26 00:08

sushil bharwani


Problem here:

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

Should be:

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

If you actually want to show/hide the div (as button value shows), your function should look like this:

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

        if (ds.style.display === 'block'){
           ds.style.display = 'none';
        }
        else {
           ds.style.display = 'block';
        }
    }
like image 45
Sarfraz Avatar answered Aug 27 '26 23:08

Sarfraz



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!