使用下拉框更改操作符以操作输入框
[英]Changing an operator using drop down box to manipulate an input box
问题描述
我刚刚开始学习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);
}
我希望select允许用户在磅/整数和百分比之间进行选择，以根据用户选择的内容更改pensionfinal2的输出。 此外，如果您可以添加注释以向我展示代码的每个部分正在做什么，将非常感激。
编辑：对不起，这很难解释，这是一个养老金计算器，经过第一次计算，并显示最终的数字，它给你选择每月增加一定数量的磅，然后再计算你的养老金将在每月添加额外资金之后，我希望用户可以选择是否要添加5英镑或5％，我已经开始使用名称为“操作”的选择标记
1 个解决方案
解决方案1
1 2015-07-22 11:10:38
我不确定此代码是否会帮助您或者不会导致您共享的代码不完整但我仍然注意到您的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"))
这是错的
结帐这个简单的代码
<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()
希望这会帮助你快乐帮助:)
输入框选项下拉
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.