jQuery 选择器值返回未定义

Question

I'm getting undefined of my variable 'base' which is basic $('slider').value. I have added a console.log(base) to test what is returned, but the value is undefined.

Here is my 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>

Do You have an idea why this is happening?

Answer 1

In JQuery, .val() function is available to get value of textbox.

 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>

Answer 2

jQuery objects don't have a value property, they have a val() method.

Answer 3

You can always pass the base variable value as a parameter to the cost function like this cost(this.value) . That would make more sense since you are already fetching the slider value once via onChange no need to do it again inside the cost function.

Please take a look at the working snippet below.

 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>