Добрый день.
В функции calculateBMI у вас используется document.querySelector(".height").value и document.querySelector(".weight").value для получения значений роста и веса, но поля ввода на самом деле имеют классы .input_height и .input_weight. Из-за этого высота и вес всегда остаются undefined.
Условия проверки (height === "" || isNaN(height)) и (weight === "" || isNaN(weight)) не сработают корректно, потому что height и weight уже будут числами или NaN. Проверка height === "" бессмысленна после преобразования parseInt.
Ну и про обратные кавычки уже упомянули, тоже акутально.
<div class="header">
<h1 class="bmi_calc">Калькулятор ИМТ</h1>
<h4>Рост</h4>
<input class="input_height" type="text" placeholder="Введите рост (см)">
<h4>Вес</h4>
<input class="input_weight" type="text" placeholder="Введите вес (кг)">
<p>
<button class="button" type="button">Рассчитать</button>
</p>
<div class="result"></div>
</div>
window.onload = () => {
const button = document.querySelector(".button");
button.addEventListener("click", calculateBMI);
}
function calculateBMI() {
const height = parseInt(document.querySelector(".input_height").value);
const weight = parseInt(document.querySelector(".input_weight").value);
const result = document.querySelector(".result");
if (isNaN(height) || height <= 0) {
result.innerHTML = "Укажите реальный рост";
} else if (isNaN(weight) || weight <= 0) {
result.innerHTML = "Укажите реальный вес";
} else {
const bmi = (weight / ((height * height) / 10000)).toFixed(2);
if (bmi < 18.6) {
result.innerHTML = `Низкий вес: <span>${bmi}</span>`;
} else if (bmi >= 18.6 && bmi < 24.9) {
result.innerHTML = `Нормальный вес: <span>${bmi}</span>`;
} else {
result.innerHTML = `Избыточный вес: <span>${bmi}</span>`;
}
}
}
Я не проверял, но по идее больше косяков нет, должно работать