Need to add onblur to update ISA calculator results without clicking calculate

Question

    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',
            },
        },
    });
}

});

        <!-- Tab 2 Content (Allocation) -->
        <div class="tab-pane fade" id="newTab">
            <div class="container mt-5">
                <div class="row">
                    <!-- Calculator Inputs (Left Side) -->
                    <div class="col-md-6">
                        <form id="isaCalculatorForm">
                            <div class="form-group custom-slider">
                                <label for="initialAmount">Initial Investment</label>
                                <input type="number" class="form-control" id="initialAmount" placeholder="£0">
                                <input id="initialAmountSlider" type="text" data-slider-min="0"
                                    data-slider-max="20000" data-slider-step="1" data-slider-value="0"
                                    data-slider-tooltip="hide" style="height: 2px" />
                                <div id="initialAmountAlert" class="alert alert-danger" style="display: none;">
                                </div>
                            </div>

                            <div class="form-group custom-slider">
                                <label for="regularAmount">Regular Investment</label>
                                <input type="number" class="form-control" id="regularAmount" placeholder="£0">
                                <input id="regularAmountSlider" type="text" data-slider-min="0"
                                    data-slider-max="2000" data-slider-step="1" data-slider-value="0"
                                    data-slider-tooltip="hide" />
                                <div id="regularAmountAlert" class="alert alert-danger" style="display: none;">
                                </div>
                            </div>

                            <div class="form-group" id="how-often-buttons">
                                <label>How often will you invest?</label><br>
                                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                    <label class="btn btn-secondary rounded mr-2">
                                        <input type="radio" name="regularFrequency" id="weeklyRadio" value="weekly"
                                            checked> Weekly
                                    </label>
                                    <label class="btn btn-secondary rounded mr-2">
                                        <input type="radio" name="regularFrequency" id="monthlyRadio"
                                            value="monthly"> Monthly
                                    </label>
                                    <label class="btn btn-secondary rounded mr-2">
                                        <input type="radio" name="regularFrequency" id="biannuallyRadio"
                                            value="biannually"> Bi-Annually
                                    </label>
                                    <label class="btn btn-secondary rounded">
                                        <input type="radio" name="regularFrequency" id="annuallyRadio"
                                            value="annually"> Annually
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="startDate">Start Date</label>
                                <input type="date" class="form-control" id="startDate">
                                <div id="startDateAlert" class="alert alert-danger" style="display: none;">
                                </div>
                            </div>
                            <input type="hidden" id="dobHidden">
                            <button type="submit" class="btn btn-primary">Calculate</button>
                        </form>
                    </div>
                    <!-- Results (Right Side) -->
                    <div class="col-md-6 center-content">
                        <div class="card" style="background-color: rgba(42, 42, 42, 0.075); border: 0;">
                            <div class="card-body center-content">
                                <!-- Pie Chart Canvas (Initially hidden) -->
                                <canvas id="currentYearChart" width="200" height="200"
                                    style="display: none;"></canvas>

                                <!-- Image Placeholder (Initially displayed) -->
                                <img src="../TP Website project/img/plus-placeholder2.png" id="imagePlaceholder"
                                    alt="Image Placeholder" style="display: block;">

                                <!-- Result Content (Initially hidden) -->
                                <div id="result" class="mt-4" style="display: none;">
                                    <!-- ... Your result content here ... -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

the above is some of my code for a project im doing through a work academy. It calculates the info a client inputs and teh results display after the calculate button is pressed, i need to make the results and pie chart automatically update after when the client updates any of the input fields without them having to click calculate again. I think i need to add onblur but not not having any luck with this. Help is massively appreciated.

Tried adding onblur but not too sure im adding it in correctly.

Answer 1

My understanding of this problem is that you need to add blur events the first time calculate is being called. This is a way you can do it:

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>

Explanation:

• we have a calculate function
• which initializes the events if they were not initialized so far
• and computes a value
• I added a blur event because you wanted it to be added and an input element so on change stuff will be recalculated

If you want the events to be added even before the call to calculate, then you can add the events like I did outside the function and you can simplify then calculate to only the computation.

EDIT

As @Mhd Alaa Alhaj pointed out in the comment section, we have a button inside a form that does the postback. In order to avoid doing so, the button either needs to be changed to <input type="button" value="calculate"> or prevent the default behavior on form submit or button click, see https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault