title: Why does my JavaScript works on here but not in my localhost or JSFiddle?
body: <p>I'm trying to create a dynamic webpage where each button displays a specific <code>&lt;div&gt;</code> page while hiding the rest of the <code>&lt;div&gt;</code> pages.</p>
  
  <p>I deploy it on here, in my localhost, and on jsfiddle but somehow it's not operating correctly on jsfiddle and my localhost BUT it works on here.</p>
  
  <p>I'm not quite sure why is that so?</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;p&gt;Click the "Try it" button to toggle between hiding and showing the DIV element:&lt;/p&gt;
  
  &lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
  &lt;button onClick="myFunction2()"&gt;Try it&lt;/button&gt;
  &lt;button onClick="myFunction3()"&gt;Try it&lt;/button&gt;
  
  &lt;div id="myDIV"&gt;
  This is my DIV element.
  &lt;/div&gt;
  
  &lt;div id="div2" style="display: none;"&gt;
  Div2
  &lt;/div&gt;
  
  &lt;div id="div3" style="display: none;"&gt;Div3&lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
  }
  #div2{
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: purple;
      margin-top: 20px;
  }
  
  #div3{
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: yellow;
      margin-top: 20px;
  }
  </code></pre>
  
  <p>My JavaScript:</p>
  
  <pre><code>function myFunction() {
      var x = document.getElementById("myDIV");
      var y = document.getElementById("div2");
      var z = document.getElementById("div3");
      if (x.style.display === "none") {
          x.style.display = "block";
      y.style.display = "none";
          z.style.display = "none";
      }
  }
  
  function myFunction2() {
      var x = document.getElementById("div2");
      var y = document.getElementById("myDIV");
      var z = document.getElementById("div3");
      if (x.style.display === "none") {
          x.style.display = "block";     
          y.style.display = "none";
          z.style.display = "none";
      }
  }
  
  function myFunction3() {
      var x = document.getElementById("div3");
      var y = document.getElementById("myDIV");
      var z = document.getElementById("div2");
      if (x.style.display === "none") {
          x.style.display = "block";     
          y.style.display = "none";
          z.style.display = "none";
      }
  }
  </code></pre>
  
  <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("myDIV");
      var y = document.getElementById("div2");
      var z = document.getElementById("div3");
      if (x.style.display === "none") {
          x.style.display = "block";
      y.style.display = "none";
          z.style.display = "none";
      }
  }
  
  function myFunction2() {
      var x = document.getElementById("div2");
      var y = document.getElementById("myDIV");
      var z = document.getElementById("div3");
      if (x.style.display === "none") {
          x.style.display = "block";     
          y.style.display = "none";
          z.style.display = "none";
      }
  }
  
  function myFunction3() {
      var x = document.getElementById("div3");
      var y = document.getElementById("myDIV");
      var z = document.getElementById("div2");
      if (x.style.display === "none") {
          x.style.display = "block";     
          y.style.display = "none";
          z.style.display = "none";
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
  }
  #div2{
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: purple;
      margin-top: 20px;
  }
  
  #div3{
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: yellow;
      margin-top: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Click the "Try it" button to toggle between hiding and showing the DIV element:&lt;/p&gt;
  
  &lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
  &lt;button onClick="myFunction2()"&gt;Try it&lt;/button&gt;
  &lt;button onClick="myFunction3()"&gt;Try it&lt;/button&gt;
  
  &lt;div id="myDIV"&gt;
  This is my DIV element.
  &lt;/div&gt;
  
  &lt;div id="div2" style="display: none;"&gt;
  Div2
  &lt;/div&gt;
  
  &lt;div id="div3" style="display: none;"&gt;Div3&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT:</p>
  
  <p>My JSfiddle link:  <a href="https://jsfiddle.net/yvw4gwwh/3/" rel="nofollow noreferrer">https://jsfiddle.net/yvw4gwwh/3/</a></p>