我刚刚开始学习JavaScript,但不确定如何允许用户选择使用百分比或仅是正常整数进行计算。
<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>
该程序首先计算年龄,贡献百分比等,然后输出数字,然后显示是否添加一定数量的磅(我试图让它为您提供磅和百分比之间的选择。
到目前为止,这是我的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);
}
我希望通过选择允许用户在磅/整数和百分比之间进行选择,以根据用户选择的内容来更改Pensionfinal2的输出。另外,如果您可以添加注释以向我展示代码的每个部分在做什么,那将不胜感激。
编辑:对不起,这很难解释,这是一个退休金计算器,经过第一次计算并显示最终数字后,您可以选择每月增加一定量的英镑,然后再次计算退休金是在每月添加额外资金之后,但我希望用户可以选择是否要增加5英镑或5%,这是我从名称为“operate”的select标签开始的
最佳答案
我不确定此代码是否会帮助您,或者是否导致您共享的代码不完整,但是我仍然注意到您的Javascript代码中有一些错误
检查以下代码,它是您代码的有效版本
<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>
上面的代码是有效的Javascript代码
您的代码有问题
您正在使用
$
创建变量,但是在javascript中,您使用var
声明了变量您以错误的方式将变量分配给元素
例如。
$salary = $("#salary");
在代码中您以这种方式使用它
$($salary) === $($("#salary"))
这是错的
checkout 这个简单的代码
<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>
在这里我已经声明了
var element = "#incCont"
我以这种方式使用它
$(element).val() === $("#incCont").val()
希望这能够帮到你
乐意效劳 :)