Me estoy volviendo undefined de mi variable 'base', que es básica $('slider').value. He agregado un archivo console.log (base) para probar lo que se devuelve, pero el valor no está definido.
Aquí está mi html:
jQuery(document).ready(function($) { let precentage = 17.5; let commision = 0.2746; function cost() { let base = $('#slider').value; let precentAmout = base * (precentage / 365 * 30); let commisionAmout = base * commision; let totalCost = commisionAmout + precentAmout; let totalSum = base + commisionAmout + precentAmout; console.log(base); $('#cost').text(totalCost); $('#sum').text(totalSum); } $('#slider').on('change', function() { $('#amout').text(this.value); cost(); }); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="calc"> <div class="range-title"> <h2 class="range-label">Ile chcesz pożyczyć?</h2> <div class="display-wrap"> <span id="amout">500</span><span class="currency"> zł</span> </div> </div> <div class="range-wrap"> <button class="buttons-change-value">-</button> <input id="slider" class="range-input" type="range" min="500" max="1500" step="50" value="500"> <button class="buttons-change-value">+</button> </div> <div class="summary-container"> <div class="summary-box"> <h3>Koszt:<br> <span id="cost">200</span><span class="currency"> zł</span></h3> </div> <div class="summary-box"> <h3>Do zwrotu:<br> <span id="sum">200</span><span class="currency"> zł</span></h3> </div> <div class="summary-box"> <h3>RRSO:<br> <span id="rrso">200</span><span class="percentage"> %</span></h3> </div> </div> </div>¿Tienes una idea de por qué sucede esto?
En JQuery, la función .val() está disponible para obtener el valor del cuadro de texto.
let base = $('#slider').val() jQuery(document).ready(function($) { let precentage = 17.5; let commision = 0.2746; function cost() { let base = $('#slider').val(); let precentAmout = base * (precentage / 365 * 30); let commisionAmout = base * commision; let totalCost = commisionAmout + precentAmout; let totalSum = base + commisionAmout + precentAmout; console.log(base); $('#cost').text(totalCost); $('#sum').text(totalSum); } $('#slider').on('change', function() { $('#amout').text(this.value); cost(); }); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="calc"> <div class="range-title"> <h2 class="range-label">Ile chcesz pożyczyć?</h2> <div class="display-wrap"> <span id="amout">500</span><span class="currency"> zł</span> </div> </div> <div class="range-wrap"> <button class="buttons-change-value">-</button> <input id="slider" class="range-input" type="range" min="500" max="1500" step="50" value="500"> <button class="buttons-change-value">+</button> </div> <div class="summary-container"> <div class="summary-box"> <h3>Koszt:<br> <span id="cost">200</span><span class="currency"> zł</span></h3> </div> <div class="summary-box"> <h3>Do zwrotu:<br> <span id="sum">200</span><span class="currency"> zł</span></h3> </div> <div class="summary-box"> <h3>RRSO:<br> <span id="rrso">200</span><span class="percentage"> %</span></h3> </div> </div> </div>Los objetos jQuery no tienen una propiedad de value , tienen un método val() .
Siempre puede pasar el valor de la variable base como parámetro a la función de costo como this cost(this.value) . Eso tendría más sentido ya que ya está obteniendo el valor del control deslizante una vez a través de onChange, no es necesario volver a hacerlo dentro de la función de costo.
Por favor, eche un vistazo al fragmento de trabajo a continuación.
jQuery(document).ready(function ($) { let precentage = 17.5; let commision = 0.2746; function cost(sliderValue) { let base = sliderValue; let precentAmout = base * (precentage / 365 * 30); let commisionAmout = base * commision; let totalCost = commisionAmout + precentAmout; let totalSum = base + commisionAmout + precentAmout; console.log(base); $('#cost').text(totalCost); $('#sum').text(totalSum); } $('#slider').on('change', function () { $('#amout').text(this.value); cost(this.value); });}) <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="calc"> <div class="range-title"> <h2 class="range-label">Ile chcesz pożyczyć?</h2> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div class="display-wrap"> <span id="amout">500</span><span class="currency"> zł</span> </div> </div> <div class="range-wrap"> <button class="buttons-change-value">-</button> <input id="slider" class="range-input" type="range" min="500" max="1500" step="50" value="500"> <button class="buttons-change-value">+</button> </div> <div class="summary-container"> <div class="summary-box"> <h3>Koszt:<br> <span id="cost">200</span><span class="currency"> zł</span></h3> </div> <div class="summary-box"> <h3>Do zwrotu:<br> <span id="sum">200</span><span class="currency"> zł</span></h3> </div> <div class="summary-box"> <h3>RRSO:<br> <span id="rrso">200</span><span class="percentage"> %</span></h3> </div> </div> </div> </body> </html>