The function works until the first alert. Why?

Question

JavaScript

In markup

<div class="row justify-content-center">
    <button class="btn btn-secondary" id="creditSubmit" type="button" data-toggle="collapse" data-target="#creditResult" aria-expanded="false" aria-controls="creditResult">Рассчитать</button>
</div>
<div class="my-2">
    <div class="collapse" id="creditResult">
        <table id="creditResultTable" class="table table-striped">
            <thead>
                <th>№</th>
                    <th>Дата</th>
                    <th>Сумма</th>
                    <th>Остаток</th>
                </thead>
                <tbody></tbody>
        </table>
    </div>
</div>

I use something like this:

document.getElementById('creditSubmit').onclick = function(){
    let form = document.forms.namedItem('creditCalc');
    let sum = form.creditSum.value;
    let term = form.creditTerm.value;
    let termType = form.creditTermType.value;
    let date = new Date(form.creditDate.value);
    let rateType = form.creditRateType.value;
    let rate = form.creditRate.value;
    let ratePerType = form.creditRatePerType.value;
    let paymentType = form.creditPaymentType.value;
    alert('0');
    let result = form.getElementById('creditResultTable').getElementsByTagName('tbody').item(0);

    alert('1');

    if (result.rows.length > 0){
        while (result.rows.length > 0){
            result.deleteRow(0);
        }
    }

    alert('2');

    if (termType === "year"){
        term *= 12;
    }

    alert('3');

    let monthlyTerm = term / 100 / 12;
    let monthlyPayment = sum * (monthlyTerm + (monthlyTerm/(Math.pow(1 + monthlyTerm, term) - 1))).toFixed(2);
    let allPayment = monthlyPayment * term;

    alert('4');

    for (let i = 0; i < term; i++){
        date.setMonth(date.getMonth() + 1);
        if (allPayment <= monthlyPayment){
            monthlyPayment = allPayment;
            allPayment = 0;
        }
        else {
            allPayment -= monthlyPayment;
        }

        let row = document.createElement("tr");
        let index = document.createElement("td");
        let dateData = document.createElement("td");
        let monthlyPaymentData = document.createElement("td");
        let allPaymentData = document.createElement("td");

        index.appendChild(document.createTextNode((i + 1).toString()));
        dateData.appendChild(document.createTextNode(date.getDate().toString()));
        monthlyPaymentData.appendChild(document.createTextNode(monthlyPayment.toString()));
        allPaymentData.appendChild(document.createTextNode(allPayment.toString()));
        row.appendChild(index);
        row.appendChild(dateData);
        row.appendChild(monthlyPaymentData);
        row.appendChild(allPaymentData);
        result.appendChild(row);
    }

    alert('5');
}

It is executed before the first alert, and after that "creditResult" is displayed and EVERYTHING!!!
Used Bootstrap styles.

Please, help.

Answer 1

why do you need an alert?
for debugging?
If so, remove all alerts and replace the first one with debugger;
Open the console (f12 usually) and refresh the site.
Your debugger will pop up and the execution will stop at the place where you wrote this line.
Next - you can step through each line and see what happens.