Javascript: сообщения об ошибках вывода обновляются при следующем нажатии клавиши (т.е. позже), а не при нажатии клавиши ⇐ CSS

[Гость]

Функциональность для всех допустимых номеров работает нормально. При использовании клавиш «нажатие» или «щелчок» преобразование римских цифр правильно отображается в выходном поле. Однако если то же самое делается для одного из номеров ошибок, поле вывода обновляется и отображает строку после следующего нажатия клавиши. Для чисел больше 3999 он также преобразует число и отобразит строку ошибки после следующего нажатия клавиши. Пожалуйста, проверьте мой JS-код и поделитесь своими мыслями.

Я все еще новичок в JS, поэтому любые другие идеи о том, как улучшить свой код, тоже будут полезны.

const NumberInput = document.getElementById("number"); const ConvertBtn = document.getElementById("convert-btn"); const outputField = document.getElementById("выходное поле"); const resetBtn = document.getElementById("reset-btn"); const errorField = document.getElementById("поле ошибки"); //конверсия функция toRoman(num) { const romanNumerals = { М: 1000, СМ: 900, Д: 500, КД: 400, С: 100, ХС: 90, Л: 50, ХL: 40, Х: 10, IX: 9, В: 5, IV: 4, Я: 1 }; пусть результат = ""; for (пусть я в римских цифрах) { while (num >= romanNumerals) { результат += я; num -= римские цифры; } } вернуть результат; } //перезагрузить функция сброса приложения() { outputField.textContent = ""; числоВход.значение = ""; errorField.textContent = ""; } //проверяем ввод пользователя функция inputCheck() { const errorNum = parseInt(numberInput.value) if (isNaN(errorNum) || !errorNum) { outputField.textContent = "Пожалуйста, введите действительный номер"; } еще если (errorNum < 1) { outputField.textContent = "Введите число, большее или равное 1"; } еще если (errorNum > 3999) { outputField.textContent = "Введите число, меньшее или равное 3999"; } еще { outputField.textContent = ""; }; возвращаться; } //функциональность кнопки ConvertBtn.addEventListener("клик", () => { inputCheck(numberInput.value); outputField.textContent = toRoman(numberInput.value); }); resetBtn.addEventListener("клик", resetApp); NumberInput.addEventListener ("нажатие клавиши", (e) => { inputCheck(numberInput.value); if (e.key === "Ввод") { outputField.textContent = toRoman(numberInput.value); } }); body { семейство шрифтов: система-ui; выравнивание текста: по центру; Конвертировать Здесь появятся выходные данные.
Сбросить
Здесь будут отображаться ошибки.

Я попробовал несколько исправлений с .textContent, .value, .innerHTML и т. д. Это состояние работает лучше всего из всех, что у меня когда-либо были. Когда outputField.textContent был заменен на errorField.textContent и отображен в отдельном элементе абзаца, сообщения об ошибках работали отлично. Однако это нарушает проверку кода класса, поскольку сообщения об ошибках должны отображаться в элементе #output.