title: Javascript, saving values from onclick and saving previous values in arrays
body: <p>i'm trying to save values retrieved from "onclick" and also save the values previously retrieved from "onclick" in different arrays when buttons are clicked.</p>
  
  <p>but it seems like when "for loop" is used, newly retrieved values overwrite previously retrieved data even though those values are saved separately in different arrays.</p>
  
  <p>i'm really confused right now, does anybody know why?</p>
  
  <p>(if you hit the button "refresh", you can see the current values that are saved.)</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>var firstValue = [];
  var preValue = [];
  
  
  
  function returneD(a){
  
      preValue = firstValue;
      console.log("returned! preValue:  "+preValue);
  
      for (var i = 0; i &lt; 1; i++) {
        firstValue[i] = a;
        console.log("returned! firstValue:  "+firstValue);
      }
  }
  
  
  function refresh1(){
    console.log("preValue:  "+preValue);
    console.log("firstValue:  "+firstValue);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script src="jstest.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body id="thebody"&gt;
  
  &lt;button id="1" onclick="returneD(this.id)"&gt;O N E&lt;/button&gt;
  &lt;button id="2" onclick="returneD(this.id)"&gt;T W O&lt;/button&gt;
  &lt;button id="3" onclick="returneD(this.id)"&gt;T H R E E&lt;/button&gt;
  &lt;button id="4" onclick="returneD(this.id)"&gt;F O U R&lt;/button&gt;
  &lt;br&gt;
  &lt;button onclick="refresh1()"&gt;refresh&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>