document.getElementById returns null value
<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>