title: Using .innerHTML from an onClick function
body: <p>I am having trouble using .innerHTML within a javascript function called by clicking a button. For a brief flickering second I can see that the function is called, and the text changed, but then the text reverts.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;form&gt;
       &lt;input type="submit" value="Change the Text" onClick="change()"&gt;
  &lt;/form&gt;
  
  &lt;div id="ToBeChanged"&gt; Hello, World &lt;/div&gt;
  
  &lt;script&gt;
   function change(){
       document.getElementById("ToBeChanged").innerHTML = "New Text"; 
   };
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Of course, if I just use the .innerHTML outside of a function, it changes the text without any problems and does not revert to the old text.  Is there a way to use .innerHTML to change text from the the onClick function? Or is there another way I should be accomplishing this task? </p>