title: Why does my Javascript code runs and disappear immediately
body: <p>I wrote the codes below to display the user's names when the user enter their name. But the name will appear and disappear immediately. What is wrong?</p>
  <p>html codes</p>
  <pre><code>&lt;div&gt;
     &lt;p id=&quot;names&quot;&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;form method = &quot;get&quot; action = &quot;&quot;&gt;
     Enter first name: &lt;input type = &quot;text&quot; id = &quot;firstName&quot;/&gt;
     Enter last name: &lt;input type = &quot;text&quot; id = &quot;lastName&quot;/&gt;
     &lt;input type = &quot;submit&quot; value = &quot;submit&quot; onclick = &quot;return firstName_lastName();&quot;/&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Javascript code</p>
  <pre><code>function firstName_lastName() {
     var firstName = document.getElementById('firstName').value;
     var lastName = document.getElementById('lastName').value;
     var names = document.getElementById('names');
  
    if (firstName == &quot;&quot; || lastName == &quot;&quot;) {
     alert('Please fill in all the fields');
     return false; 
    } else {
      names.innerHTML = firstName + &quot; &quot; + lastName; 
     return true; 
  }
  </code></pre>
  <p>The code works but the names appear and disappear immediately.</p>
  <p>Edit: The code runs but when the submit button is clicked, the entered first and last names appear on the browser and disappear immediately.
  The alert also works perfectly when any or both of the fields are not filled.</p>