title: document.getElementById returns null value
body: <p>Hello I have these divs:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="layoutGroup1"&gt;
      &lt;h2&gt;UK Map&lt;/h2&gt;
      &lt;div div style="width: 650px; height: 700px;" id="MapDIV"&gt;&lt;/div&gt;
      &lt;div id="userUpdateDIV"&gt;&lt;/div&gt;
      &lt;div id="BarChartDIV"&gt;&lt;/div&gt;
      &lt;div id="divPack1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="layoutGroup2"&gt;
      &lt;div id="tree"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="layoutGroup3"&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want by having three buttons on the screen and clicking to hide the two divs and display only one.  </p>
  
  
  
  <pre><code>button id="userButton" onclick ="showOnClick('layoutGroup1');"&gt;ECA &lt;/button
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function showOnClick(element) {
      if (element == 'layoutGroup1') {
          document.getElementById('layoutGroup1').style.display == 'block';
          document.getElementById('layoutGroup2').style.display == 'none';
          document.getElementById('layoutGroup3').style.display == 'none';
      } else if (element == 'layoutGroup2') {
          document.getElementById("layoutGroup1").style.display == 'none';
          document.getElementById("layoutGroup2").style.display == 'block';
          document.getElementById('layoutGroup3').style.display == 'none';
      } else {
          document.getElementById("layoutGroup3").style.display == "block";
          document.getElementById("layoutGroup1").style.display == "none";
          document.getElementById("layoutGroup2").style.display == "none";
      }
   }
  </code></pre>
  
  <p>Above is the function I use, although it gives me an error that the <code>getElementByID</code> is <code>null</code>.</p>