title: Want to execute javascript as many times without refreshing the page
body: <p>I want javascript to execute as many times I want to but it's only
  executing once. The code below works perfectly fine but, after the
  clicking of both the buttons, I have to refresh the page to make it work
  again. Please help me out with this problem. Just wanna execute it as
  many times I want to but without refreshing the page.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt; 
      &lt;h1 class="head" id="h" onclick="change()"&gt;TEST PAGE&lt;/h1&gt; 
          &lt;form name="myform"&gt; 
              &lt;input name="horizontal" type="button" class="button1" value="Swap Horizontal" id="SH1" onclick="swaphorizontal()"&gt; 
          &lt;/form&gt; 
          &lt;form name="myform1"&gt; 
              &lt;input name="vertical" type="button" class="button2" value="Swap Vertical" id="SV1" onclick="swapvertical()"&gt; 
          &lt;/form&gt; 
          &lt;h2 class="mybox"&gt;&lt;/h2&gt; 
          &lt;h2 class="line1"&gt;&lt;/h2&gt; 
          &lt;h2 class="line2"&gt;&lt;/h2&gt; 
          &lt;h2 class="voidbutton1"&gt;&lt;/h2&gt; 
          &lt;h2 class="voidbutton2"&gt;&lt;/h2&gt; 
  &lt;/body&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>&lt;script&gt;
  
      function swapvertical() {
  
          document.getElementById("SV1").style.top = "210px";
  
          document.getElementById("SH1").style.top = "414px";
  
      }
      function swaphorizontal() {
  
          document.getElementById("SV1").style.left = "386px";
  
          document.getElementById("SH1").style.left = "178px";
  
      }
  &lt;/script&gt;
  </code></pre>