user7186746 user7186746 - 7 days ago 6
Javascript Question

How to make my JS code start 'fresh' again after the purpose has been served?

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.

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?



//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 = '<h1 style="display:inline;margin-left:40%;">' + 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 >= 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");

}
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="klik_Hart" class="heart"></div>





How can I solve this problem effectively?

Answer

Given your sample code, the simple way to solve this is just to reset your variables (tijdLaatsteClick, bpm, beats, average, count) to their initial state once you have shown the alert.

So note this code block after your alert:

// re-initialise
tijdLaatsteClick = 0;
bpm = 0;
beats = [];
average = 0;
count = 0;

There are a number of ways to re-factor the code to do what you want in more concise, or elegant ways but this gets the job done:

//Eigen stukje JS -- Hartmeting Tool//

var tijdLaatsteClick = 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 - tijdLaatsteClick) / 1000)) * 60);
tijdLaatsteClick = tapSeconds;

//show image of an heart while clicking.
klik_Hart.innerHTML = '<h1 style="display:inline;margin-left:40%;">' + Math.floor(bpm);

//+ '</h1><br><img style="height:35px;width:35px;margin-left:50%;" src="img/heart.png"/>'

//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 >= 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");
  
  // re-initialise
  tijdLaatsteClick = 0;
  bpm = 0;
  beats = [];
  average = 0;
  count = 0;
}
});
.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;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="klik_Hart" class="heart"></div>

Note your code had an error such that timeLastClick had to be replaced by tijdLaatsteClick.

Comments