title: Fade HTML element with raw javascript
body: <p>It's my second question of the day related to the same problem, so I apologize for that.</p>
  
  <p>I was able to put together a function to "fade out" an element, and it works just fine, my problem is that when I try to <strong>reverse</strong> it, so the element "fades in" it does not work.
  I've tried to change the obvious, but I can't understand what I'm doing wrong.</p>
  
  <p>My code so far is as follows:</p>
  
  <p>Given I have a "div" like so:</p>
  
  <pre><code>&lt;div id="test" style="width:200px; height:200px; display:block; opacity:1; background-color:red;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The JavaScript function that I'm using to fade it out is:</p>
  
  <pre><code>var getElement = document.getElementById('test');
  function fadeOut(elem, speed){
  if(!elem.style.opacity){
      elem.style.opacity = 1;
  }
  var desvanecer = setInterval(function(){
      elem.style.opacity -= .02;
      if(elem.style.opacity &lt; 0){
          clearInterval(desvanecer);
      }
  }, speed / 50);
  }
  fadeOut(getElement, 500);
  </code></pre>
  
  <p>Could somebody take a look at this and let me know what I'm doing wrong, all I want to do is "FADE IN" an element to an opacity equal to "1".</p>
  
  <p>By the way, I can't use jQuery, however I'm eager to learn this way.</p>
  
  <p>Thanks</p>
  
  <p>My attemp to reverse the function is as follows:</p>
  
  <pre><code>var getElement = document.getElementById('test');
  function fadeIn(elem, speed){
  if(elem.style.opacity){
      elem.style.opacity = 0;
  }
  var desvanecer = setInterval(function(){
      elem.style.opacity += .02;
      if(elem.style.opacity &gt; 1){
          clearInterval(desvanecer);
      }
  }, speed / 50); 
  }
  fadeIn(getElement, 500);
  </code></pre>