Javascript Hide/Show Button Does Not Work Properly

I want to add Javascript show/hide button to show and hide a dive element of my page.

This is my code:

while($r = $query->fetch(PDO::FETCH_OBJ)){
    echo "
    <html>
        <head>
            <title>What is the equivalent?</title>
            <style>
            .center{
                margin-left:50%;
            }
            </style>
        </head>
        <body>
            <div class='center'>
                <div class='show'>
                    <form action='' method='POST'>
                        <h1>".$r->german."</h1>
                        <h5>".$r->table_id."</h5>
                        <p><input type='submit' value='Show' onclick='myFunction()'></input></p></br>
                        <div id='myDIV'>
                            This is my DIV element.
                        </div>
                        <p></p>
                    </form>
                    <a href='en-de.php' style='text-decoration:none'>En to De</a>
                </div>
            </div>
            <hr>
            <p>$count</p>
        </body>
        <script>
        function myFunction() {
          var x = document.getElementById('myDIV');
          if (x.style.display === 'none') {
            x.style.display = 'block';
          } else {
            x.style.display = 'none';
          }
        }
        </script>
    </html>
    ";
}

As you can see I have set this <input type='submit' value='Show' onclick='myFunction()'></input> and the myFunction() is called at the bottom between script tags.

But the problem is it does not work out and div within id of myDIV is always shown at the page.

So how to fix this? What’s going wrong here?

22 thoughts on “Javascript Hide/Show Button Does Not Work Properly”