title: How do i retain the results of an onclick function
body: <p>I am writing javascript function for a grid rotator that should rotate the buttons when one button is clicked. </p>
  
  <p>I am developing a grid rotator which consists of a 3x3 grid form with buttons labeled 1-9. my code should rotate the outer buttons when 5 is clicked. When i click the button, they rotate but immediately return to their initial state. please help me ensure that the result of the rotation stays. This is my second day coding JS. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Button_5.onclick = function() {
    var viarableNum = Button_1.innerHTML;
    Button_1.innerHTML = Button_4.innerHTML;
    Button_4.innerHTML = Button_7.innerHTML;
    Button_7.innerHTML = Button_8.innerHTML;
    Button_8.innerHTML = Button_9.innerHTML;
    Button_9.innerHTML = Button_6.innerHTML;
    Button_6.innerHTML = Button_3.innerHTML;
    Button_3.innerHTML = Button_2.innerHTML;
    Button_2.innerHTML = viarableNum;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>form {
    display: grid;
    grid-column-gap: 4px;
    grid-template-columns: auto auto auto;
    background-color: rgb(182, 95, 95);
    padding: 4px;
    width: 400px;
    height: 400px;
    margin-left: 40%;
    margin-top: 10%;
  }
  
  .button {
    background-color: rgba(212, 210, 68, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 4px;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;head&gt;
    &lt;title&gt;Rotate&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form&gt;
      &lt;button id="Button_1" class="button"&gt;1&lt;/button&gt;
      &lt;button id="Button_2" class="button"&gt;2&lt;/button&gt;
      &lt;button id="Button_3" class="button"&gt;3&lt;/button&gt;
      &lt;button id="Button_4" class="button"&gt;4&lt;/button&gt;
      &lt;button id="Button_5" class="button"&gt;5&lt;/button&gt;
      &lt;button id="Button_6" class="button"&gt;6&lt;/button&gt;
      &lt;button id="Button_7" class="button"&gt;7&lt;/button&gt;
      &lt;button id="Button_8" class="button"&gt;8&lt;/button&gt;
      &lt;button id="Button_9" class="button"&gt;9&lt;/button&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My expected output should maintain the result of the onclick function when 5 is clicked. it works with a div tag but not with the form. please help.  Thanks in advance</p>