Показать сообщение отдельно
  #15 (permalink)  
Старый 04.06.2020, 23:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Если на странице нужен просто калькулятор, форма не отправляется, то многое в ней что у вас просто лишнее. Здесь будем следить за вводом в полях, проверять ввод, и управлять доступностью кнопки.

Нужно обратить внимание на обрабатываемое событие (оно делегируется форме) input. О поддержке его можно прочесть здесь, следовательно и принимать решение - все норма или ... При обработке такого события вывод ошибок посредством alert будет просто раздражительным, поэтому будем выводить их на странице. Также сделаем не вывод ошибок во всех полях, а только для первого, в котором найдена ошибка. Также разобьем причину ошибки на два раздельных сообщения.

<form id="bank">
    <label>Сумма(руб.): </label>
    <input type="text" name="summ" /><br /><br />
    <label>Срок(мес.): </label>
    <input type="text" name="srok" /><br /><br />
    <label>Ставка(%):</label>
    <input type="text" name="stavka" /><br /><br />	
    <label>Общая сумма: </label>
    <input type="text" name="result" readonly /><br /><br />
    <input type="button" id="run" value="Вычислить!" disabled />
</form>

<p id="error"></p>

<script>

document.getElementById('bank').addEventListener('input', function() {
    let fld = this.elements, error = '';
        
    [...fld].slice(0, 3).some((e) => {
        if(!e.value || /\D/.test(e.value)) {
            let f = e.previousElementSibling.textContent.match(/.+(?=\()/);
            error = !e.value && `Заполните поле ${f}!` || `В поле ${f} разрешен ввод только цифр!`; 
            return true;
        }
    });
    
    document.getElementById('error').textContent = error; 
    fld.run.disabled = error;
});

document.getElementById('run').addEventListener('click', calculate);

function calculate() {
    this.form.result.value = (this.form.summ.value * (this.form.stavka.value/100/12) * this.form.srok.value).toFixed(2)
}
</script>

Последний раз редактировалось laimas, 05.06.2020 в 00:29.
Ответить с цитированием