I am trying to do a simple calculation based on a few inputs, however I am unable to get the value from the currently active HTML button class using Javascript.
The code loops through the buttons and adds the active class to the current/clicked button. I then want the calculation to be based off the value of that active button.
The variable "rating" returns undefined.
What would be the correct way to do this?
HTML:
<div class="finance-calc">
<div class="finance-entry">
<h1 class="title">Finance calculator</h1>
<div class="finance-inputs">
<div class="amount">
<h4>I'd like to borrow</h4>
<input id="finance-amount-input" type="text">
</div>
<div class="term">
<h4>Over a period of</h4>
<select name="term" id="finance-term-input">
<option value="12">12 months</option>
<option value="24">24 months</option>
<option value="36">36 months</option>
<option value="48">48 months</option>
</select>
</div>
</div>
<h2 class="rating">Rating</h2>
<div id="finance-options">
<button id="excellent" value="2" class="btn active">Excellent</button>
<button id="good" value="1.13" class="btn">Good</button>
<button id="average" value="1.14" class="btn">Average</button>
<button id="bad" value="1.15" class="btn">Bad</button>
</div>
</div>
<div class="finance-output">
<div id="result"></div>
<div id="total-payable">Total payable: £5420</div>
<button id="calculate" value="10">Calculate</button>
<button class="apply-btn">Apply Now</button>
</div>
</div>
JS:
// Get the container element
var btnContainer = document.getElementById("finance-options");
// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
// Calculate button
const calculate = document.getElementById("calculate");
// Button click calculates monthly payment
calculate.addEventListener("click", function () {
const amount = document.getElementById("finance-amount-input").value;
const term = document.getElementById("finance-term-input").value;
const rating = document.getElementsByClassName("active").value; // i want this line to find the value attribute of the active button
const loan = (amount * rating) / term;
document.getElementById("result").innerHTML = "£" + loan.toFixed(2) + " PCM";
});
