Сначала зафиксируйте расчёт
Если введено 500 переходов, 2% подтверждённых действий и 400 ₽ за действие, оценка начисления — 4 000 ₽. Это сценарий, а не прогноз выплаты. Можно отдельно добавить расходы и показать разницу. Не используйте долю от 0 до 1 и проценты от 0 до 100 в одном поле. Если в редакции уже есть модель с отдельным апрувом, подпишите, применяется ли он дополнительно. В данной версии доля уже относится к подтверждённым действиям.
Используйте поле number с ограничениями и элемент output для результата. Значение можно получить через valueAsNumber. Пустой ввод даёт значение, которое нужно отклонить, а ноль при заданных ограничениях может быть допустим.
Реализуйте форму и обработчик
<form id="estimate">
<label>Переходы <input name="clicks" type="number" min="0" step="1" required></label>
<label>Подтверждения, % <input name="rate" type="number" min="0" max="100" step="any" required></label>
<label>Выплата, ₽ <input name="payout" type="number" min="0" step="any" required></label>
<button>Рассчитать</button>
<output id="result" aria-live="polite"></output>
</form>
<script>
const form = document.querySelector('#estimate');
const out = document.querySelector('#result');
const format = new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' });
form.addEventListener('input', () => { out.value = ''; });
form.addEventListener('submit', event => {
event.preventDefault();
if (!form.reportValidity()) return;
const [clicks, rate, payout] = ['clicks', 'rate', 'payout']
.map(name => form.elements.namedItem(name).valueAsNumber);
const amount = clicks * (rate / 100) * payout;
out.value = Number.isFinite(amount) ? format.format(amount) : 'Проверьте значения';
});
</script>
Проверьте результат и доступность
Откройте пример в браузере. Проверьте 500, 2 и 400, затем 0 переходов и положительные остальные значения. Попробуйте 101% и пустое поле. Браузер должен заблокировать отправку некорректной формы, а после редактирования старый результат исчезнуть. Попробуйте дробный процент на телефоне. Убедитесь, что клавиатура, кнопка и подписи доступны, а формат суммы соответствует локали.
При расширении добавляйте расходы отдельным полем. Проверьте отрицательную итоговую разницу при положительных расходах. Для опубликованного результата покажите формулу и пару контрольных примеров. Так читатель сможет заметить, что ввёл не ту единицу. Вводимые суммы не требуют отправки на сервер. Если добавите аналитику использования, для замера достаточно события расчёта без значений.
При подготовке калькулятора для редакции храните формулу отдельно от подписей. Если позже добавите две валюты, не складывайте суммы до явного пересчёта и указывайте, когда взят курс. Для теста с малыми значениями оставляйте число подтверждений дробным внутри расчёта, а округляйте только отображение. Оценка 0,5 ожидаемого действия описывает средний сценарий, а не половину реальной продажи.
Держите в редакционном тесте проверку пределов. При 100% подтверждений расчёт должен вернуть число переходов, умноженное на выплату. При нулевой ставке итог равен нулю. Если подпись «выплата» со временем станет «средний чек», формулу придётся менять. Сверяйте её вместе с текстом интерфейса при каждом обновлении.