需要添加onblur来更新ISA计算器结果而不点击计算

问题描述 投票：0回答：1
    var initialAmount = parseFloat($('#initialAmount').val());
    var regularAmount = parseFloat($('#regularAmount').val());
    var regularFrequency = $("input[name='regularFrequency']:checked").val();
    var startDate = new Date($('#startDate').val());

    var ageAtStartDate = startDate.getFullYear() - dobDate.getFullYear();

    if (startDate.getMonth() < dobDate.getMonth() || (startDate.getMonth() === dobDate.getMonth() && startDate.getDate() < dobDate.getDate())) {
        ageAtStartDate--;
    }

    var currentYear = startDate.getFullYear();
    var currentTaxYearStart = new Date(currentYear, 3, 6);
    var nextYear = currentYear + 1;
    var nextTaxYearStart = new Date(nextYear, 3, 6);

    if (startDate >= currentTaxYearStart && startDate < nextTaxYearStart) {
        var totalContributions = initialAmount;

        if (regularFrequency === 'weekly') {
            var weeksDiff = Math.floor((nextTaxYearStart - startDate) / (7 * 24 * 60 * 60 * 1000));
            totalContributions += (regularAmount * weeksDiff);
        } else if (regularFrequency === 'monthly') {
            var monthsDiff = (nextTaxYearStart.getMonth() - startDate.getMonth()) + (12 * (nextTaxYearStart.getFullYear() - startDate.getFullYear()));
            totalContributions += (regularAmount * monthsDiff);
        } else if (regularFrequency === 'biannually') {
            var monthsDiff = (nextTaxYearStart.getMonth() - startDate.getMonth()) + (12 * (nextTaxYearStart.getFullYear() - startDate.getFullYear()));
            totalContributions += (regularAmount * (monthsDiff / 6));
        } else if (regularFrequency === 'annually') {
            var yearsDiff = nextTaxYearStart.getFullYear() - startDate.getFullYear();
            totalContributions += (regularAmount * yearsDiff);
        }

        var remainingAllowance = 20000 - totalContributions;

        if (remainingAllowance < 0) {
            var requiredContributions = 0;

            if (regularFrequency === 'weekly') {
                requiredContributions = (20000 - initialAmount) / weeksDiff;
            } else if (regularFrequency === 'monthly') {
                requiredContributions = (20000 - initialAmount) / monthsDiff;
            } else if (regularFrequency === 'biannually') {
                requiredContributions = (20000 - initialAmount) / (monthsDiff / 6);
            } else if (regularFrequency === 'annually') {
                requiredContributions = (20000 - initialAmount) / yearsDiff;
            }

            $('#result').html('<p class="text-danger">You have exceeded the annual ISA allowance.</p>' +
                '<p>Your age at the start date is ' + ageAtStartDate + ' years old.</p>' +
                '<p>Total Contributions for This Tax Year: £' + totalContributions.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                '<p>Remaining Allowance for This Tax Year: £' + remainingAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>');

            var nextTaxYearContributions;

            if (regularFrequency === 'weekly') {
                nextTaxYearContributions = (regularAmount * 52);
            } else if (regularFrequency === 'monthly') {
                nextTaxYearContributions = (regularAmount * 12);
            } else if (regularFrequency === 'biannually') {
                nextTaxYearContributions = (regularAmount * 2);
            } else if (regularFrequency === 'annually') {
                nextTaxYearContributions = regularAmount;
            }

            if (nextTaxYearContributions < 20000) {
                var remainingNextTaxYearAllowance = 20000 - nextTaxYearContributions;
                $('#result').append('<p>Remaining Allowance for Next Tax Year: £' + remainingNextTaxYearAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>');
            }
        } else if (remainingAllowance >= 0) {
            var nextTaxYearContributions;

            if (regularFrequency === 'weekly') {
                nextTaxYearContributions = (regularAmount * 52);
            } else if (regularFrequency === 'monthly') {
                nextTaxYearContributions = (regularAmount * 12);
            } else if (regularFrequency === 'biannually') {
                nextTaxYearContributions = (regularAmount * 2);
            } else if (regularFrequency === 'annually') {
                nextTaxYearContributions = regularAmount;
            }

            if (nextTaxYearContributions > 20000) {
                var maxContributionsForNextYear = 0;

                if (regularFrequency === 'weekly') {
                    maxContributionsForNextYear = Math.floor(20000 / 52);
                } else if (regularFrequency === 'monthly') {
                    maxContributionsForNextYear = Math.floor(20000 / 12);
                } else if (regularFrequency === 'biannually') {
                    maxContributionsForNextYear = Math.floor(20000 / 2);
                } else if (regularFrequency === 'annually') {
                    maxContributionsForNextYear = Math.floor(20000);
                }

                $('#result').html('<p class="text-danger">Contributions for the next tax year exceed the annual ISA allowance.</p>' +
                    '<p>Your age at the start date is ' + ageAtStartDate + ' years old.</p>' +
                    '<p>Total Contributions for This Tax Year: £' + totalContributions.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                    '<p>Remaining Allowance for This Tax Year: £' + remainingAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                    '<p>Total Contributions for Next Tax Year: £' + nextTaxYearContributions.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                    '<p>To stay within the allowance for the next tax year, you can contribute a maximum of £' + maxContributionsForNextYear.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' ' + regularFrequency + '.</p>');
            } else {
                $('#result').html('<p>Your age at the start date is ' + ageAtStartDate + ' years old.</p>' +
                    '<p>Total Contributions for This Tax Year: £' + totalContributions.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                    '<p>Remaining Allowance for This Tax Year: £' + remainingAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                    '<p>Total Contributions for Next Tax Year: £' + nextTaxYearContributions.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>');

                if (nextTaxYearContributions < 20000) {
                    var remainingNextTaxYearAllowance = 20000 - nextTaxYearContributions;
                    $('#result').append('<p>Remaining Allowance for Next Tax Year: £' + remainingNextTaxYearAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>');
                }
            }
        }
    } else if (startDate >= nextTaxYearStart) {
        var remainingAllowance = 20000;
        $('#result').html('<p>Allowance for Next Full Tax Year: £' + remainingAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>');
    }

     // hide placeholder
$("#imagePlaceholder").hide();
$("#currentYearChart").show();
$("#result").show();

var initialAmountSlider = getElementById()

updatePieChart(remainingAllowance);

initialAmountSlider.addEventListener("blur", submit)

});

function updatePieChart(remainingAllowance) {
    var currentYearChart = new Chart(document.getElementById('currentYearChart'), {
        type: 'pie',
        data: {
            labels: ['Used Allowance', 'Remaining Allowance'],
            datasets: [{
                data: [20000 - remainingAllowance, remainingAllowance],
                backgroundColor: ['#36254d', '#0195a7'],
            }],
        },
        options: {
            title: {
                display: true,
                text: 'Current Tax Year Allowance Usage',
            },
        },
    });
}

});

上面是我通过工作学院所做的一个项目的一些代码。它计算客户端输入的信息，并在按下计算按钮后显示结果，我需要在客户端更新任何输入字段后自动更新结果和饼图，而无需再次单击计算。我想我需要添加 onblur 但没有运气。非常感谢您的帮助。

尝试添加 onblur 但不太确定我是否正确添加它。

javascript calculator currency finance figure
1个回答
0
投票

我对这个问题的理解是，您需要在第一次调用 

calculate
时添加模糊事件。这是一种可以做到的方法：

function initialize(array) {
    for (let item of array) {
        if (!item.classList.contains("initialized")) {
            item.addEventListener("blur", calculate);
            item.addEventListener("input", calculate);
            item.classList.add("initialized");
        }
    }
}

function calculate() {
    let first = document.getElementById("first");
    let second = document.getElementById("second");
    let third = document.getElementById("third");
    let fourth = document.getElementById("fourth");
    initialize([first, second, third, fourth]);
    document.getElementById("output").innerHTML = parseInt(first.value) + parseInt(second.value) + 2 * parseInt(third.value) + 3 * parseInt(fourth.value);
}
First <input id="first" type="number" value="1"><br>
Second <input id="second" type="number" value="1"><br>
Third <input id="third" type="number" value="1"><br>
Fourth <input id="fourth" type="number" value="1"><br>
<input type="button" value="calculate" onclick="calculate()">
<div id="output"></div>

说明：

  • 我们有一个
    calculate
    功能
  • 如果事件尚未初始化，则初始化事件
  • 并计算一个值
  • 我添加了一个 
    blur
    事件，因为您希望添加它和一个 
    input
    元素，因此更改内容将被重新计算

如果您希望在调用 

calculate
之前添加事件，那么您可以像我在函数外部所做的那样添加事件，然后可以将 
calculate
简化为仅计算。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.