JSFiddle - React, Tailwind, and code Playground
by mademoiselletse
HTML
<div class="item_div"><label>Miles:</label>
<select id="miles">
<option value="10000">10,000</option>
<option value="12000" selected>12,000</option>
<option value="15000">15,000</option>
</select>
</div>
<div class="item_div">
<label>Residual: </label>
<input type="number" id="resP" class="rmVal" value="52"> %
</div>
<div>
<label>Result (10000*Residual)</label>
<input id = "result"></input>
</div>
JavaScript
var miles = $("#miles");
var resP = $("#resP");
var resN = parseFloat(resP.val())/100;
function calculate(){
$('#result').val(1000*resN)
milesChange();
}
calculate();
//miles.change(calculate);
function milesChange (){
if (miles.val() == "12000") {
miles.change(function() {
if (miles.val() == "10000") {
resN = resN +.01;
resP.val(parseFloat(resP.val())+1);
calculate();
}
else if (miles.val() == "15000") {
resN = resN -.02;
resP.val(parseFloat(resP.val())-2);
calculate();
}
})
};
if (miles.val() == "10000") {
miles.change(function() {
if (miles.val() == "12000") {
resN = resN - .01;
resP.val(parseFloat(resP.val())-1);
calculate();
}
else if (miles.val() == "15000") {
resN = resN -.03;
resP.val(parseFloat(resP.val())-3);
calculate();
}
})
};
if (miles.val() == "15000") {
miles.change(function() {
if (miles.val() == "10000") {
resN = resN + .03;
resP.val(parseFloat(resP.val())+3);
calculate();
}
else if (miles.val() == "12000") {
resN = resN +.02;
resP.val(parseFloat(resP.val())+2);
calculate();
}
})
};
}