title: How to make my JS code start 'fresh' again after the purpose has been served?
body: <p>I wrote this code (learning as I went), it measures Beats Per Minute as one clicks the left-mouse-button each time he/she feels a pulse. After 10 clicks the js code takes all the values in the array and calculates an Average BPM. </p>
  
  <p>After this, you can start clicking again if lets say you want to go at it again. But the problem is, the code continues based on the previous values. How can I make it so that after the 10 clicks, you can start 'fresh' again with a new measurement?</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>//Eigen stukje JS -- Hartmeting Tool//
  
  //Initial Variables
  var timeLastClick = 0;
  var bpm = 0;
  
  //My list
  var beats = [];
  
  var average = 0;
  var count = 0;
  
  
  var klik_Hart = document.getElementById("klik_Hart");
  
  //obtain time of last click.
  $(klik_Hart).on('click', function() {
    var tapSeconds = new Date().getTime();
  
    //calculate difference Beats Per Minute.
    bpm = ((1 / ((tapSeconds - timeLastClick) / 1000)) * 60);
    timeLastClick = tapSeconds;
  
    //show image of an heart while clicking.
    klik_Hart.innerHTML = '&lt;h1 style="display:inline;margin-left:40%;"&gt;' + Math.floor(bpm);
  
    //Throw values in beats list.
    beats.push(Math.floor(bpm));
    average *= count;  //average = average * count
    average += Math.floor(bpm);  //average = average + count
    count++; //count on.
    average /= count;  //average = average / count
  
    //If the list contains 10 values, give pop-up displaying measured values and average.
    if(beats.length &gt;= 10) {
  
      //pop up van gemeten resultaten en de gemiddelde hartslag.
      alert("The measured values are: \n\n" + beats + "\n\nUw average heartrate is:\n\n" + average+" bpm");
  
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.heart{
    color:#FBF9FF;
    background-image: url("http://placehold.it/350x150");
    background-size: 150px 150px;
    height: 150px; 
    width: 150px;
  }
  
  .heart:hover{
    color: #FFA07A;
    background-color: grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="klik_Hart" class="heart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I solve this problem effectively?</p>