title: innerHTML is working on body element but not p element
body: <p>I want to a display a message on the screen that says "Please enter a valid email address" if the email address is not valid. The innerHTML statement for the body element is working fine but the one I'm using for the p element doesn't work. </p>
  
  <p>One time when I was testing it, I saw the message "Please enter a valid email address" display and then after I clicked the ok button for the "not valid" alert box the message went away.</p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;      
  function validateEmail() {
      var emailRule =  /^(([^&lt;&gt;()[\]\\.,;:\s@\"]+(\.[^&lt;&gt;()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;   
      if (emailRule.test(document.forms[0].email.value)) {
         document.getElementById("body").innerHTML = "Thank you for signing up for our newsletter! You will recieve a confirmation email shortly.";
         setTimeout("window.close()", 3000);
      }
      else
         window.alert("not valid");       //for debugging
         document.getElementById("message").innerHTML = "Please enter a valid email address";
  }  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;/head&gt;
  &lt;body id="body"&gt;
  &lt;p&gt;If you sign up for our newsletter you will be entered into a drawing to win free clothes every month!&lt;/p&gt;
  &lt;br&gt;
  &lt;p id="message"&gt; &lt;/p&gt;
  &lt;form action="" onsubmit="validateEmail();"&gt;
  &lt;p&gt;Email: &lt;input type="text" name="email"/&gt;
  &lt;input type="submit" value="Sign up"/&gt;&lt;/p&gt;
  &lt;br&gt;
  &lt;input type="button" value="No thanks" onclick="window.close()"/&gt;
  &lt;br&gt;
  &lt;/form&gt;
  &lt;p&gt;&lt;a href="privacy.html"&gt;Privacy Policy&lt;/a&gt;&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>