Luego de una primera duda resuelta (¡gracias masterguru!), tengo otra que se generó a raíz del primer código.
En resumen son 2 botones con valores "10" y "5" los cuales al presionarlos, suma al total el valor correspondiente a cada uno y sin limites en la cantidad de clics.
Lo que no logro solucionar es que el botón "resetear", vuelva todos los valores a 0 correctamente.
Aparentemente si lo hace, pero al volver a jugar con los botones "10" y "5", hay valores erróneos en el total :(, lo que implica que no se resetearon correctamente los valores.
Comparto el código completo. Muchas Gracias por su ayuda!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
function sumar() {
var total = 0;
$(".monto").each(function() {
// $
if (isNaN(parseFloat($(this).val()))) {
total += 0;
} else {
total += parseFloat($(this).val());
}
});
//alert(total);
document.getElementById('spTotal').innerHTML = total;
}
var count = 0
function funcion() {
count++
document.getElementById('bt').value = 10 * count
sumar()
}
var count2 = 0
function funcion2() {
count2++
document.getElementById('bt2').value = 5 * count2
sumar()
}
function resetear() {
document.getElementById("spTotal").innerHTML = "0"
count = 0;
count2 = 0;
}
</script>
</head>
<body>
<table>
<tr>
<td>TOTAL:</td>
<td><span id="spTotal">0</span></td>
</tr>
</table>
<br>
<button class="monto" id="bt" onClick="funcion();">
<img src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-right-icon.png" width="50" height="50" />suma 10
</button>
<br><br>
<button class="monto" id="bt2" onClick="funcion2();">
<img src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-right-icon.png" width="50" height="50" /> suma 5
</button>
<br>
<br>
<button onclick="resetear()" class="button">RESETEAR</button>
</body>
</body>
</html>