Question

我刚刚开始学习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);

}

我希望select允许用户在磅/整数和百分比之间进行选择，以根据用户选择的内容更改pensionfinal2的输出。此外，如果您可以添加注释以向我展示代码的每个部分正在做什么，那将非常感激。

编辑：对不起，这很难解释，这是一个养老金计算器，经过第一次计算，并显示最终的数字，它给你选择每月增加一定数量的磅，然后再计算什么您的养老金将是在每月添加额外资金之后，但我希望用户可以选择是否要添加5英镑或5％，我已经开始使用名称为“操作”的选择标记

Answer 1

我不确定此代码是否会帮助您或者不会导致您共享的代码不完整，但我仍然注意到您的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"))

这是错误的

结帐这个简单的代码

    <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()

希望这会对你有所帮助很乐意提供帮助：）

使用下拉框更改操作符以操作输入框

1 个答案: