title: HTML image display set to none later won't show up when set to block
body: <p>I'm working on a web game that's playable on both desktop and mobile. Playing on mobile devices requires the user to play in landscape mode.</p>
  
  <p>I did a simple check on device orientation via width versus height, and I'm supposed to show an image telling the player to rotate the device. So I added this to the html file:</p>
  
  <pre><code>&lt;div id="rotateWarning"&gt;&lt;img src="res/plsRotate.png" style="width: 100%; height: auto;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This has the problem of showing the image by default. The user would have to rotate the phone to portrait mode if it were in landscape mode, and back again. Worse, it also shows by default on Desktop browsers, and there's no way to rotate that. The code does work though, hiding the image when it's rotated the right way.</p>
  
  <p>So the alternative is to set it to <code>display: none</code> by default, right?</p>
  
  <p>The problem with that is that it never shows. It seems once set to <code>display: none</code>, it ignores every attempt to change it.</p>
  
  <p>Is there anything I can do to fix this? Alternatively, is there a better way to implement this idea?</p>
  
  <p>Edit:</p>
  
  <p>Here's my HTML file:</p>
  
  <pre><code>&lt;script&gt;
      window.addEventListener('resize', onSizeChange);
  &lt;/script&gt;
  </code></pre>
  
  <p>And here's my function:</p>
  
  <pre><code>function onSizeChange() {
      if (getMobileOperatingSystem) {
          if (window.outerHeight &gt; window.outerWidth) {
              document.getElementById('rotateWarning').style.display = 'block';
              document.getElementById('logInPages').style.display = 'none';
          } else {
              console.log("Landscape!");
              document.getElementById('rotateWarning').style.display = 'none';
              document.getElementById('logInPages').style.display = 'block';
          }
      }
  }
  </code></pre>