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?
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>jQuery objects don't have a value property, they have a val() method.
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>