javascript - 自动计算多个下拉选择

Question

我正在尝试使用 html 和 JavaScript 从下拉列表中选择的值生成总数，我的代码正在运行。但是当我从下拉列表中更改我的选择时，我希望在每个下拉列表选择中更改总数。但它没有发生。就像如果我在税后收入中输入值(value)并在下拉列表中选择每两周一次，总的变化。但是当我输入第二个和第三个值并分别设置每月和每周时，它不会根据选择而改变。问题出在哪里？

<script>
function asum() {
    var first = document.getElementById('a1').value;
    if (document.getElementById('a1').value == "") {
        var first = 0;
    }

    var second = document.getElementById('a2').value;
    if (document.getElementById('a2').value == "") {
        var second = 0;
    }

    var third = document.getElementById('a3').value;
    if (document.getElementById('a3').value == "") {
        var third = 0;
    }

    var forth = document.getElementById('fc4').value;
    if (document.getElementById('fc4').value == "") {
        var forth = 0;
    }

    var fifth = document.getElementById('fc5').value;
    if (document.getElementById('fc5').value == "") {
        var fifth = 0;
    }

    var aresult = parseInt(first) + parseInt(second) + parseInt(third);
    //aduration1
    if (document.getElementById('aduration3').value == "Monthly") {
        var aweekly = parseInt((aresult * 12) / 52);
        if (!isNaN(aresult)) {
            document.getElementById('a4').value = aweekly;

        }
    }
    if (document.getElementById('aduration3').value == "Fortnightly") {
        var weekly = parseInt((aresult * 26) / 52);
        if (!isNaN(aresult)) {
            document.getElementById('a4').value = weekly;

        }
    }
    if (document.getElementById('aduration3').value == "Weekly") {

        if (!isNaN(aresult)) {
            document.getElementById('a4').value = parseInt(aresult);

        }
    }
    //aduration2
    if (document.getElementById('aduration2').value == "Monthly") {
        var aweekly = parseInt((aresult * 12) / 52);
        if (!isNaN(aresult)) {
            document.getElementById('a4').value = aweekly;

        }
    }
    if (document.getElementById('aduration2').value == "Fortnightly") {
        var weekly = parseInt((aresult * 26) / 52);
        if (!isNaN(aresult)) {
            document.getElementById('a4').value = weekly;

        }
    }
    if (document.getElementById('aduration2').value == "Weekly") {

        if (!isNaN(aresult)) {
            document.getElementById('a4').value = parseInt(aresult);

        }
    }
    //aduration3
    if (document.getElementById('aduration3').value == "Monthly") {
        var aweekly = parseInt((aresult * 12) / 52);
        if (!isNaN(aresult)) {
            document.getElementById('a4').value = aweekly;

        }
    }
    if (document.getElementById('aduration3').value == "Fortnightly") {
        var weekly = parseInt((aresult * 26) / 52);
        if (!isNaN(aresult)) {
            document.getElementById('a4').value = weekly;

        }
    }
    if (document.getElementById('aduration3').value == "Weekly") {

        if (!isNaN(aresult)) {
            document.getElementById('a4').value = parseInt(aresult);

        }
    }
}

</script>

   <div>
    <center>
        <table cellpadding="5px" style="border: 1px solid !important; padding: 10px !important;width: 40% !important;">
            <tr>
                <td style="width: 25%;">
                    <label>After tax salary</label>
                </td>
                <td style="width: 20%;">
                    <input type="text" id="a1" placeholder="$" vlaue="0" onkeyup="asum();" />
                </td>
                <td style="width: 15%;">
                    <select id="aduration3" name="aduration3" onchange="asum();">
                        <option value="Monthly">Monthly</option>
                        <option value="Fortnightly">Fortnightly</option>
                        <option value="Weekly">Weekly</option>
                    </select>
                </td>
                <td style="width: 41%;">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Net passive income</label>
                </td>
                <td>
                    <input type="text" id="a2" placeholder="$" onkeyup="asum();" />
                </td>
                <td>
                    <select id="aduration2" name="aduration2" onchange="asum();">
                        <option value="Monthly">Monthly</option>
                        <option value="Fortnightly">Fortnightly</option>
                        <option value="Weekly">Weekly</option>
                    </select>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Other income</label>
                </td>
                <td>
                    <input type="text" id="a3" placeholder="$" onkeyup="asum();" />
                </td>
                <td>
                    <select id="aduration1" name="aduration1" onchange="asum();">
                        <option value="Monthly">Monthly</option>
                        <option value="Fortnightly">Fortnightly</option>
                        <option value="Weekly">Weekly</option>
                    </select>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td colspan="2">
                    <input type="text" id="a4" placeholder="$" onclick="asum();" style="height: 30px !important; margin-top: 3px; margin-bottom: 3px;" />
                </td>
                <td>
                    <label><b style="font-size:16px;" onclick="asum();"><u>TOTAL WEEKLY INCOME</u></b>
                        <label>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td colspan="2">
                    <input type="phone" id="a5" placeholder="$" onclick="bsum();" onkeyup="bsum();" style="height:30px !important;" />
                </td>
                <td>
                    <label><b style="font-size:16px;" onclick="bsum();"><u>TOTAL WEEKLY SURPLUS</u></b></label>
                </td>
            </tr>
        </table>
    </center>
</div>

Answer 1

您可以使用 jQuery 中的几行简单代码完成所有计算:

$(':input').on('change blur keyup', function(){
    var a = parseInt($('#a1').val()) || 0;
    var b = parseInt($('#a2').val()) || 0;
    var c = parseInt($('#a3').val()) || 0;
    var aresult = a + b + c;
    var ad2 = $('#aduration2').val();
    var ad3 = $('#aduration3').val();
    switch(ad2){
        case 'Monthly':
            $('#a4').val( (aresult * 12) / 52 );
            break;
        case 'Fortnightly':
            $('#a4').val( (aresult * 26) / 52 );
            break;
        case 'Weekly':
            $('#a4').val( aresult );
            break;
    }
    switch(ad3){
        case 'Monthly':
            $('#a5').val( (aresult * 12) / 52 );
            break;
        case 'Fortnightly':
            $('#a5').val( (aresult * 26) / 52 );
            break;
        case 'Weekly':
            $('#a5').val( aresult );
            break;
    }
});

fiddle HERE

PS 在你的代码中你提到了 #aduration1 这在你的 HTML 中是不存在的，并且你对 #aduration3 进行了双重计算