我刚刚开始学习JavaScript,但不确定如何允许用户选择使用百分比或仅是正常整数进行计算。

    <div id="pensionRev"  style="display:none; margin: 0 auto; width:600px;" class="answer_list" >
        <h3><u>Your pension will come to &pound;<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">&pound;</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;">&pound;<span id="pensionfinal2"></span>!</h2>
        This is an increase of &pound;<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 &pound;<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">&pound;</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;">&pound;<span id="pensionfinal2"></span>!</h2>
    This is an increase of &pound;<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()

希望这能够帮到你
乐意效劳 :)

09-25 16:37
查看更多