个人中心
gpt4 book ai didi

javascript - 使用下拉框更改运算符来操作输入框

转载 作者：可可西里 更新时间：2023-11-01 14:45:04 30 4
gpt4 key购买 nike

我最近才开始学习 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%，我已经从名称为“操作”的选择标签开始

最佳答案

我不确定这段代码是否对您有帮助，因为您分享的代码不完整，但我仍然注意到您的 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()

希望对你有帮助乐于助人:)

关于javascript - 使用下拉框更改运算符来操作输入框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31558860/

30 4 0
文章推荐： java - 从 Java 应用程序中执行 Pig
文章推荐： windows - 为什么可以将 MemoryBarrier 实现为对 xchg 的调用？
文章推荐： windows - 为什么 Unicode Windows 标题栏(仅)是问号(？)代码点？
文章推荐： windows - GetWindowsVersionEx 函数在 Windows 2012 R2 中输出错误
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com