de antemano agradesco el poder acceder a ustedes para resolver un problema del cual llevo días sin solucionar.
El código que compartiré más abajo es solo un extracto funcional de mi proyecto, para poder ejemplificar el problema. No tiene estilos ni forma. Solo es funcional.
En esencia, son 3 selectores, los cuales al ser utilizados suman a la casilla "total". Eso esta perfecto y sin problemas. Se pueden seleccionar libremente los valores y el total siempre actualizará.
Mi problema es que intenté crear un botón con imagen, con un valor asignado y este al ser presionado, sume al total. Funciona, pero solo he logrado que dicho botón sume solo una vez al total. Luego de la primera vez este muere y ya no es útil.
Necesito que si presiono 10 veces, pues las 10 veces genere la suma correspondiente al total y sin limites.
Muchas gracias de antemano por su ayuda!
Código:
<!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;
}
</script>
</head>
<body>
<table><tr>
<select class="monto" onchange="sumar();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="monto" onchange="sumar();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="monto" onchange="sumar();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</tr> </table>
<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"/>
</button>
<script>
function funcion() {
document.getElementById('bt').value = '10'
sumar()
}
</script>
</body>
</html>