0

Tengo un problema con un script, y resulta que estoy tratando de mostrar un div oculto (#regalo) cuando el resultado de una suma es >xxx, pero el problema es que sólo funciona con valores enteros ( value="499" ), y no me funciona con decimales en el html ( value="499.99" )...

HTML:

$(document).ready(function(){

  function manageRegalo() {

    var totalStorage = Number(localStorage.getItem("total"));
    //var total = Number($("#total").val().replace(".",""));
    var total = Number($("#total"));
    if(totalStorage != null && total === 0) {
      total = totalStorage;
    }

  //if(total > 999.99 && total < 2999.99) { No funciona.

    if(total > 999 && total < 2999) { //Sin decimal funciona bien.

    $('#regalo').show();
    if (localStorage.getItem('suppress_gift_tooltip_1') == null) {
      $('.tooltip').show();

      window.setTimeout(function(){
        $('.tooltip').fadeOut('slow');
      },9000);

      localStorage.setItem('suppress_gift_tooltip_1', 'true')
    } // New - Local Storage for Tooltip
  } else {
    $('#regalo').hide();
  }
 }

  $(document).on('click', function (event) {
    const target = event.target;
    if (target.matches('.comp-clone') || target.matches('.bbp')) {
      manageRegalo();

      //localStorage.setItem('total',Number($("#total").val().replace(".","")));
      localStorage.setItem('total', Number($("#total")));
    }
  });
  manageRegalo();
});
.tooltip {
  display:none;
  width:60px;
  height:60px;
  background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<style>
  
</style>


<div id="regalo">1</div>


<div id="ver-carrito">  
  <p>Productos en tu Carrito:</p>
  <div class="cont-num" id="clicksdos">0</div>
  <div id="cont-resultado"><p>Total a pagar:</p>

  <input name="total" id="total" readonly="readonly"> <!-- **** ID TOTAL **** -->

  </div>
</div>



<div id="cont-p1" class="cont-p">
  <div id="producto-1">
  Producto 1<br><br>499 €
  <input class="add-prod" value="499" readonly="readonly">
  <!-- value="499.99" El script no funciona -->
  </div>
</div>

<div id="cont-p2" class="cont-p">
  <div id="producto-2">
  Producto 2<br><br>299 €
  <input class="add-prod" value="299" readonly="readonly">
  <!-- value="299.99" El script no funciona -->
  </div>
</div>

<div id="cont-p3" class="cont-p">
  <div id="producto-3">
  Producto 3<br><br>399 €
  <input class="add-prod" value="399" readonly="readonly">
  <!-- value="399.99" El script no funciona -->
  </div>
</div>

Nota 1: El valor "499" del primer ejemplo html ... (sin decimal) funciona bien. Pero si el valor = "499.99" (con punto decimal), mi script ya no funciona correctamente, suma los valores pero no muestra el div oculto. Los mismo pasa con otros valores con decimales ( 3.99 - 5.99 - 9.99 ...)

Nota 2: He borrado el .val().replace(".","") del script pero tampoco funciona.

4
  • Falta #total.
    – user13558
    Commented el 6 ago. 2019 a las 3:23
  • @ArtEze ... No falta '#total' ... La página está completa y la estoy usando sin problemas, salvo lo importante que es que el script publicado no me reconoce los '"value=xx.xx"' esto es, con punto decimal...
    – Pablo_Web
    Commented el 6 ago. 2019 a las 3:40
  • Me refería a que falta ese div con el id="total" en el HTML. De todos modos publiqué una respuesta, espero que te sirva.
    – user13558
    Commented el 6 ago. 2019 a las 4:12
  • Aún con las ediciones, falta la función que calcula el total, y los div con class comp-clone y bbp
    – user13558
    Commented el 6 ago. 2019 a las 21:05

2 respuestas 2

1

Para calcular el total solo hay que hacer esto:

var total = eval(Array.from($(".add-prod").map((a,b)=>$(b).val())).join("+"))
$("#total").val(total)

Lo que hago es buscar todos los productos, que tienen class .add-prod.

$(".add-prod")

Luego busco sus valores mediante .val(), entonces recorro el array con .map

.map((a,b)=>$(b).val())

A todo eso le hago un Array.from para convertirlo a un array, que es la lista de precios.

Array.from($(".add-prod").map((a,b)=>$(b).val()))

El array quedaría así:

[499.99, 299, 399]

Por último los uno con un + con .join para luego hacer el cálculo mediante eval.

499.99+299+399

Además agrego el resultado en #total:

$("#total").val(total)
1
  • 1
    Gracias @ArtEze ... Voy a estudiar tu propuesta y hacer cambios en mi trabajo. Si tengo problemas vuelvo a comentar. Un saludo!
    – Pablo_Web
    Commented el 6 ago. 2019 a las 22:38
0

pongale al input el type="text", luego en javascript use Number(valor).

<input id="total" type="text" class="add-prod" value="499" readonly="readonly">

var total = Number($("#total").val());

ahora si no tiene id de los input utilice el html padre para recorrer el valor de los hijos con un for y use class para identificarlos.

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.