Sum after x Clicks

by dawnbirth

HTML

<body>
<p id="demo"></p>
<div class="mydiv">
<button class="summed" value="1" onclick="countFunc()">BUTTON ONE</button><br>
<button class="summed" value="2" onclick="countFunc()">BUTTON TWO</button><br>
<button class="summed" value="3" onclick="countFunc()">BUTTON THREE</button><br>
<button class="summed" value="4" onclick="countFunc()">BUTTON FOUR</button><br>
<button class="summed" value="5" onclick="countFunc()">BUTTON FIVE</button><br>
</div>
</body>

JavaScript

/*
* First create a function to sum values of buttons.
* Buttons are supplied to the function as an array of objects 'els'.
*/
function sumValues( els ) {
  var sum = 0;
  for( var i = 0; i < els.length; i++ ) {
    sum += Number( els[i].value );
  }
  return sum;
}
/*
* The second function counts the clicks and when cnt == 10; it
* uses sumValues() to sum and print the result in #demo elements.
*/
var cnt = 0;
function countFunc(){
 cnt++;
 if ( cnt == 10 ) {
   var demo  = document.getElementById( 'demo' );
   var els   = document.getElementsByClassName( 'summed' );
   var total = sumValues( els );
   demo.innerHTML = 'Total Sum = ' + total ;
 }
}