title: Why is the div hiding but not showing?
body: <p>I am trying to make a program that, when a button is pressed, a function is called and everything is hidden except one div. But I don't understand why this isn't working. If there is some simple fix, I would be grateful, but I may be going about this problem completely wrong.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var x = document.getElementById("div1");
    var y = document.getElementById("main");
    y.style.display = "none";
    x.style.display = "block";
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1 {
    width:50px;
    height:50px;
    background-color: blue;
  }
  
  #div2 {
    width:50px;
    height:50px;
    background-color: red;
  }
  
  #div3 {
    width:50px;
    height:50px;
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div id="main"&gt;
    &lt;div id="div1"&gt;&lt;/div&gt;
    &lt;div id="div2"&gt;&lt;/div&gt;
    &lt;div id="div3"&gt;&lt;/div&gt;
    &lt;button onclick="myFunction()"&gt;Show only Div 1&lt;/button&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm trying to do this without jQuery, but if that is the only way possible to achieve what I am trying to do, then I will use that.</p>
  
  <p>Edit: Suppose I have lots of divs. Is there any quick way to hide all of them but one, without jQuery, without having to individually go through all the divs and hide them?</p>