title: Buggy fade in/out code in JavaScript/CSS
body: <p>I'm not the most proficient in coding and have been stuck at trying to get this function working right for days and hope that someone could help me...</p>
  
  <p>The idea is for the red div to show by default and the blue/yellow divs to be called upon by pressing the 'fade 1' and 'fade 2' buttons. When either of the buttons are pressed the red div is hidden and wont be called for. </p>
  
  <p>The current code bugs up when the buttons are pressed continuously, they either wont show, the fade effect wont work or the red div appears.</p>
  
  <p>Thanks!</p>
  
  <pre><code>            &lt;!DOCTYPE html&gt;
              &lt;html&gt;
              &lt;head&gt;
                  &lt;style type="text/css"&gt;
                      .myBtn
                      {
                          width:80px;
                      }
  
  
                       #myImg0
                      {
                          -webkit-transition: opacity 0.5s ease-in;
                          -moz-transition: opacity 0.5s ease-in;
                          -o-transition: opacity 0.5s ease-in;
                          position:absolute;
                          background-color:red;
                          width: 100px;
                          height: 100px;
                      }
                      #myImg1
                      {
                          -webkit-transition: opacity 0.5s ease-in;
                          -moz-transition: opacity 0.5s ease-in;
                          -o-transition: opacity 0.5s ease-in;
                          position:absolute;
                          background-color:blue;
                          width: 100px;
                          height: 100px;
                      }
  
                      #myImg2
                      {
                          -webkit-transition: opacity 0.5s ease-in;
                          -moz-transition: opacity 0.5s ease-in;
                          -o-transition: opacity 0.5s ease-in;
                          position:absolute;
                          background-color:yellow;
                          width: 100px;
                          height: 100px;
                      }
                      #myImg1.fade-out
                      {
                          opacity:0;
                      }
                      #myImg1.fade-in
                      {
                          opacity:1;
                      }
                      #myImg2.fade-out
                      {
                          opacity:0;
                      }
                      #myImg2.fade-in
                      {
                          opacity:1;
                      }
                      .hide {display: none;}
  
                  &lt;/style&gt;
                  &lt;script type="text/javascript"&gt;
                      function fade1(btnElement) {
                          if (btnElement.value === "Fade Out") {
                              document.getElementById("myImg0").className = "fade-out";
                              document.getElementById("myImg2").className = "fade-out";
                              btnElement.value = "Fade In";
                          }
                          else {
                              document.getElementById("myImg1").className = "fade-in";
                              btnElement.value = "Fade Out";
                          }
                      }
                      function fade2(btnElement) {
                          if (btnElement.value === "Fade Out") {
                              document.getElementById("myImg0").className = "fade-out";
                              document.getElementById("myImg1").className = "fade-out";
                              btnElement.value = "Fade In";
                          }
                          else {
                              document.getElementById("myImg2").className = "fade-in";
                              btnElement.value = "Fade Out";
                          }
                      }
                  &lt;/script&gt;
              &lt;/head&gt;
              &lt;body&gt;
                  &lt;input class="myBtn" type="button" value="Fade 1" onclick="fade1(myImg1);" /&gt;
                  &lt;input class="myBtn" type="button" value="Fade 2" onclick="fade2(myImg2);" /&gt;
                  &lt;div id="myImg0" &gt;&lt;/div&gt;
                  &lt;div id="myImg1" class="hide" &gt;&lt;/div&gt;
                  &lt;div id="myImg2" class="hide" &gt;&lt;/div&gt;
  
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>