Задать вопрос
@Kratos_ss
javascript

В чём ошибка js?

window.onload = () => {
    let button = document.querySelector(".button");

    button.addEventListener("click", calculateBMI);
}

function calculateBMI () {
    let height = parseInt(document.querySelector(".height").value);

    let weight = parseInt(document.querySelector(".weight").value);

    let result = document.querySelector(".result");

    if (height === "" || isNaN(height)) result.innerHTML = "Укажите реальный рост";

    else if (weight === "" || isNaN(weight)) result.innerHTML = "Укажите реальный вес";

    else {
        let 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>";
    }
}


html

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Калькулятор ИМТ</title>

    <link rel="stylesheet" href="/Css/style.css">

</head>
<body>
    
    <div class="header">

        <h1 class="bmi_calc">Калькулятор ИМТ</h1>

        <h4 class="height">Рост</h4>
        <input class="input input_height" type="text" placeholder="Введите рост (см)">

        <h4 class="weight">Вес</h4>
        <input class="input input_weight" type="text" placeholder="Введите вес (кг)">

        <p>
            <button class="button" type="button">Рассчитать</button>
        <p>

        <div class="result"></div>

    </div>

    <script src="/Js/script.js"></script>

</body>
</html>



выводит один и тот же результат
6730f3feb72b2555748667.png
  • Вопрос задан
  • 196 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Aetae
@Aetae Куратор тега JavaScript
Тлен
Ни в чём. Ошибка у тебя скорее всего в html, который ты не привёл.
// разве что чтоб шаблоны в строках работали надо использовать ` а не ".
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ответы на вопрос 2
@ImagineTables
1. Я делаю…
2. Я ожидаю…
3. Вместо этого я получаю…

У вас 1 пункт из 3.
Ответ написан
Комментировать
Комментировать
VadimOswald
@VadimOswald
Добрый день.
В функции 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>`;
                }
            }
        }


Я не проверял, но по идее больше косяков нет, должно работать
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка мобильного приложения с дополненной реальностью (AR)
21 нояб. 2024, в 20:14
200000 руб./за проект
Внедрить код Roistat
21 нояб. 2024, в 19:31
500 руб./за проект
VPN приложение на IOS
21 нояб. 2024, в 19:28
200000 руб./за проект
Ещё заказы