0

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>

1 respuesta 1

1

Prueba con esto:

var count = 0
function funcion() {
  count++
  document.getElementById('bt').value = 10 * count
  sumar()
}

pues de este modo vamos acumulando los clicks y los multiplicamos por el valor deseado y luego, al ejecutar la función sumar() se incluyen correctamente.

Snippet de ejemplo (con dos botones, tal como has pedido en los comentarios):

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()
}
<!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>
  </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>

    <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" />
    </button>

  </body>

</html>

Ya nos diras si te sirve.

8
  • Gracias masterguru! funciona PERFECTO! Tan solo tengo un problema asociado. Intenté duplicar el botón para tener una segunda opción con valor "5", dando id "bt2", otra función "funcion2()" creando la respectiva función llamando esta vez a "bt2", y ocurre que si presiono el botón con valor "5", suma correctamente de 5 en 5, pero si cambio al botón de valor 10, no me suma 10, ya comienza a generar números grandes ya que se intervienen las multiplicaciones :(. ¿de que forma podría crear un segundo botón que sume "5" y que al volver al de "10", sume 10 y no se vuelva loco? Muchas Gracias!!!
    – Hector G.
    Commented el 14 jun. 2022 a las 21:48
  • a ciegas va a ser dificil, pero supongo que has cambiado la variable count por otra en la nueva función... ¿o no?
    – masterguru
    Commented el 14 jun. 2022 a las 21:50
  • @HectorG. acabo de actualizar mi respuesta y he dejado el snippet con los dos botones para que veas que funciona bien (o eso espero)
    – masterguru
    Commented el 14 jun. 2022 a las 21:56
  • Gracias! ahora si!!! respuesta aceptada. Muchísimas gracias por tu ayuda eres de lo mejor.
    – Hector G.
    Commented el 14 jun. 2022 a las 22:04
  • Lo se, mi modestia me impide reconocerlo, pero lo se :-D
    – masterguru
    Commented el 14 jun. 2022 a las 22:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.