Change operator using a dropdown to control an input field
I just recently started learning JavaScript and I'm not sure how to do this to allow the user to choose to calculate with a percentage or just a normal integer.
<div id="pensionRev" style="display:none; margin: 0 auto; width:600px;" class="answer_list" >
<h3><u>Your pension will come to £<span id="pensionfinal"></span></u></h3>
<h3>If you contribute an additional
<select name="operate" style="width:59px; text-align:left; font-size:17px;">
<option value="pound" id="percentage">£</option>
<option value="percentage" id="percentage">%</option>
</select>
<div class="inpt" id="smallnum">
<input class="input-xxsmall" id="incCont"
name="incCont" type="text" maxlength="2" placeholder="?">
</div>
a month
</h3>
<h3>Your pot will be.....
<div class="controls">
<input class="submit" name="submit2" id="submit2" value="Submit" type="submit">
</div>
</div>
<div id="pensionRev2" style="display:none; margin: 0 auto; width:600px; border-radius:20px; border-bottom:ridge black 5px;" class="answer_list" >
<h2 style="text-decoration:underline;">£<span id="pensionfinal2"></span>!</h2>
This is an increase of £<span id="increase"></span></h3>
</div>
</div>
<script src="/_/js/java.js" type="text/javascript"></script>
The program first takes age, percentage contribution, etc., then prints out the number, and then shows if you add a certain amount of pounds (I'm trying to give it options between pounds and percentage.
Here's my JavaScript:
$salary = $("#salary");
$eepension = $("#eecontrib");
$pension_cont = $("#pension_cont");
$ret_age = $("#ret_age");
$DOB = $("#DOB");
$employerCont = $("#employerCont")
$incCont = $("#incCont")
$(document).ready(function() {
$("#submit").click(function() {
Calculate();
})
$("#submit2").click(function() {
Calculate2();
})
});
function Calculate() {
document.getElementById('pensionRev').style.display = "block";
var pension = $($pension_cont).val()
var employee = $($employerCont).val()
var totalpension = parseFloat(pension) + parseFloat(employee);
var pensionfinal = ($($salary).val() / 100) * totalpension * (($($ret_age).val()) - $($DOB).val())
$('#pensionfinal').html(pensionfinal);
}
function Calculate2() {
document.getElementById('pensionRev2').style.display = "block";
var pension = $($pension_cont).val();
var employee = $($employerCont).val();
var totalpension = parseFloat(pension) + parseFloat(employee);
var agesort = $($ret_age).val() - $($DOB).val();
var totalincrease = ($($incCont).val() * 12) * agesort;
var pensionfinal = ($($salary).val() / 100) * totalpension * agesort;
var pensionfinal2 = pensionfinal + totalincrease;
var increase = totalincrease
$('#pensionfinal2').html(pensionfinal2);
$('#increase').html(totalincrease);
}
I would like the selection to allow the user to choose between pounds / integer and percentage to change the withdrawal of the pension fund2 depending on what the user has chosen. Also, if you could add comments to show me what each piece of code does, that would be much appreciated.
edit: Sorry it's hard to explain, this is a retirement calculator, and after it goes through the first calculation and shows the final number, it gives you the option to add a certain amount of pounds every month, and then calculates again what your pension will be after adding extra funds per month, but I would like the user to be able to choose whether they want to add 5% or 5%, which I started with a select tag called "work"
source to share
I'm not sure if this code will help you or if it will not make the code you shared is incomplete, but still I noticed a few errors in your Javascript code.
Check the code that is a valid version of your code
<html>
<body>
<div id="pensionRev" style="margin: 0 auto; width:600px;" class="answer_list" >
<h3><u>Your pension will come to £<span id="pensionfinal"></span></u></h3>
<h3>If you contribute an additional
<select name="operate" style="width:59px; text-align:left; font-size:17px;">
<option value="pound" id="percentage">£</option>
<option value="percentage" id="percentage">%</option>
</select>
<div class="inpt" id="smallnum">
<input class="input-xxsmall" id="incCont"
name="incCont" type="text" maxlength="2" placeholder="?">
</div>
a month
</h3>
<h3>Your pot will be.....
<div class="controls">
<input class="submit" name="submit2" id="submit2" value="Submit" type="submit">
</div>
</div>
<div id="pensionRev2" style="display:none;margin: 0 auto; width:600px; border-radius:20px; border-bottom:ridge black 5px;" class="answer_list" >
<h2 style="text-decoration:underline;">£<span id="pensionfinal2"></span>!</h2>
This is an increase of £<span id="increase"></span></h3>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var salary = '#salary';
var eepension = '#eecontrib';
var pension_cont = '#pension_cont';
var ret_age = '#ret_age';
var DOB = '#DOB';
var employerCont = '#employerCont';
var incCont = '#incCont';
$(document).ready(function() {
$("#submit").click(function() {
Calculate();
})
$("#submit2").click(function() {
Calculate2();
})
});
function Calculate() {
document.getElementById('pensionRev').style.display = "block";
var pension = $(pension_cont).val()
var employee = $(employerCont).val()
var totalpension = parseFloat(pension) + parseFloat(employee);
var pensionfinal = ($(salary).val() / 100) * totalpension * (($(ret_age).val()) - $(DOB).val())
$('#pensionfinal').html(pensionfinal);
}
function Calculate2() {
document.getElementById('pensionRev2').style.display = "block";
var pension = $(pension_cont).val();
var employee = $(employerCont).val();
var totalpension = parseFloat(pension) + parseFloat(employee);
var agesort = $(ret_age).val() - $(DOB).val();
var totalincrease = ($(incCont).val() * 12) * agesort;
var pensionfinal = ($(salary).val() / 100) * totalpension * agesort;
var pensionfinal2 = pensionfinal + totalincrease;
var increase = totalincrease;
$('#pensionfinal2').html(pensionfinal2);
$('#increase').html(totalincrease);
}
</script>
The above code is valid Javascript code
The problem is in your code you are creating variables with $
, but in javascript you are declaring variables with var
you assigned the variables to the elements incorrectly For example.
$salary = $("#salary");
and in your code you use it this way
$($salary) === $($("#salary"))
what is wrong
check out this simple code
<input class="input-xxsmall" id="incCont" name="incCont" type="text" maxlength="2" placeholder="?">
<input type="button" id="simple-button" value="Click Here"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var element = "#incCont";
$(document).ready(function(){
$("#simple-button").click(function(){
alert($(element).val());
});
});
</script>
here i have declared an element with
var element = "#incCont"
and i use it this way
$(element).val() === $("#incCont").val()
Hope this helps you. Glad to help :)
source to share