Функция работает до первого alert. Почему?

Question

[selil]

В разметке

<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>

использую такую штуку:

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

Выполняется до первого alert, а после отображается "creditResult" и ВСЁ!!!
Использовал стили Bootstrap.

Пожалуйста, помогите.

Comments

[Nikolay Matyushkin]

Чего-то тут не хватает. Как минимум я не вижу в вашей разметке элементов форму, которой вы оперируете в событии JS. Ну и хорошо бы в песочницу это все засыпать, поверьте мне, это ускорит процесс решения вашей проблемы.

[Nikolay Matyushkin]

selil ну ок, давай так:

где у тебя форма,

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;

Answer 1

[maned7]

зачем вам алерт?
для отладки?
Если да, то уберите все алерты и замените первый строкой debugger;
Откройте консоль (f12 обычно) и обновите сайт.
У вас выскочит дебаггер и исполнение остановится на том месте где вы написали эту строку.
Далее - вы можете пошагово идти по каждой строке и смотреть что происходит.