使用JavaScript切换显示div。 开始隐藏，单击以显示

Question

I would like to toggle whether a div is visible using a button to hide/reveal the div on click.

I have code which will do this, but the div is visible on page load by default. I'd like the div to start hidden and only be revealed when the viewer clicks.

Here is the code I am using currently. Is there a way to change this so the div starts hidden?

<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<button onclick="myFunction()">Enquire Now &gt;</button>
<div id="myDIV">
    <form action="/post.php" method="post">
        <p>Enter your contact details</p>
        <p>
        Name: <input type="text" name="name"><br>
        Tel: <input type="tel" name="tel"><br>
        Email: <input type="email" name="email" value="Email Address"></p>

        <p><input type="submit"></p>
    </form>
</div>

Answer 1

Change

<div id="myDIV">

to

<div id="myDIV" style="display: none;">

Answer 2

您可以使用style属性：

<div id="myDIV" style="display: none">