Tengo un problema con un script (soy un novato de nivel 0), 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:**

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(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();
    });

<!-- language: lang-css -->

    .tooltip {
      display:none;
      width:60px;
      height:60px;
      background:red;
    }

<!-- language: lang-html -->

    <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>

<!-- end snippet -->


>  **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.