title: JavaScript Fade In Not Working Correctly - 2 of 4 divs fade in correctly
body: <p>I just need each div to fade in once, doesn't need to fade out. Only .landing and .about fade in. .images and .contact don't fade in at all, but I can still click the invisible button on the .images div. If you need my CSS for the ids, please let me know. I'm still a JavaScript beginner, so this could be an easy fix.</p>
  
  <p></p>
  
  <pre><code>&lt;div class="landing"&gt;
  
    &lt;div class="content" id="fadein"&gt; &lt;!-- "fadein" is for my onload function --&gt;
  
      &lt;div class="header"&gt;
        &lt;h1 style="margin: 0;"&gt;Placeholder&lt;/h1&gt;
        &lt;h4 style="margin: 0;"&gt;Placeholder&lt;/h4&gt;
      &lt;/div&gt;
  
      &lt;div class="down"&gt;
        &lt;a href="#about"&gt;
          &lt;img src="down.png"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;a id="about"&gt;&lt;/a&gt;
  &lt;div class="wrapper"&gt;
  
    &lt;div class="content" id="fadeinclick"&gt;
  
      &lt;h3 style="margin: 0;"&gt;Placeholder&lt;/h3&gt;
      &lt;h3 style="margin: 0;"&gt;Placeholder&lt;/h3&gt;
      &lt;h3 style="margin: 0;"&gt;Placeholder&lt;/h3&gt;
      &lt;h3 style="margin: 0;"&gt;Placeholder&lt;/h3&gt;
  
      &lt;div class="down"&gt;
        &lt;a href="#images"&gt;
          &lt;img src="down.png"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;a id="images"&gt;&lt;/a&gt;
  &lt;div class="wrapper"&gt;
  
    &lt;div class="content" id="fadeinclick"&gt; &lt;!-- first div that won't fade in --&gt;
  
      &lt;h3&gt;Images&lt;/h3&gt;
  
      &lt;div class="activity"&gt;
        &lt;img src="placeholder.png"&gt;&lt;/img&gt;
        &lt;img src="placeholder.png"&gt;&lt;/img&gt;
        &lt;img src="placeholder.png"&gt;&lt;/img&gt;
      &lt;/div&gt;
  
      &lt;div class="down"&gt;
        &lt;a href="#contact"&gt;
          &lt;img src="down.png"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;a id="contact"&gt;&lt;/a&gt;
  &lt;div class="wrapper"&gt;
  
    &lt;div class="content" id="fadeinclick"&gt; &lt;!-- second div that won't fade in --&gt;
  
      &lt;h3&gt;Contact&lt;/h3&gt;
  
      &lt;div class="activity"&gt;
        &lt;img src="placeholder.png"&gt;&lt;/img&gt;
        &lt;img src="placeholder.png"&gt;&lt;/img&gt;
        &lt;img src="placeholder.png"&gt;&lt;/img&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;!-- Fade scripts --&gt;
  &lt;script&gt;
    window.onload = function() {
      document.getElementById("fadein").style.opacity = 1;
    }
  &lt;/script&gt;
  
  &lt;script&gt;
    window.onclick = function() {
      document.getElementById("fadeinclick").style.opacity = 1;
    }
  &lt;/script&gt;
  </code></pre>
  
  <p></p>