0

Решил написать свой простенький калькулятор калорий использую необходимые формулы. Однако столкнулся с такой проблемой, что скрипт работает только, если выбран пункт Низкая активность. То есть, если выбираю средняя или высокая, то он выдает одно и тоже значение.

Пришел к выводу, что программа просто не попадает в конструкцию else if, не могу понять почему.

Результат в консоли, если что:)

Скрипт

function caloryCalc(){
    // НЕ ЗАБЫТЬ ОПТИМИЗИРОВАТЬ!!!!!

    let weight = document.querySelector('#weight').value;
    let growth = document.querySelector('#growth').value;
    let age = document.querySelector('#age').value;

    // Формула Base metabolic rate -bmr
    weight = parseInt(weight);
    growth = parseInt(growth);
    age = parseInt(age);

    bmr = 88.36 + (13.4 * weight) + (4.8 * growth) - (5.7 * age);

    let activity = document.getElementById('activity');
    let goals = document.getElementById('goal');
    
    if (activity.selectedIndex == 1) {
        bmr *= 1.375;   // low activity

        if (goals.selectedIndex == 1) {
            bmr = bmr - (bmr / 100) * 20;
        }
        else if (goals.selectedIndex == 2) {
            bmr = bmr;
        }
        else if (goals.selectedIndex == 3) {
            bmr = bmr + (bmr / 100) * 20;
        }

    else if (activity.selectedIndex == 2) {
        bmr *= 1.55;    // middle activity
        if (goals.selectedIndex == 1) {
            bmr = bmr - (bmr / 100) * 20;
        }
        else if (goals.selectedIndex == 2) {
            bmr = bmr;
        }
        else if (goals.selectedIndex == 3) {
            bmr = bmr + (bmr / 100) * 20;
        }
    }
    else if (activity.selectedIndex == 3) {
        bmr *= 1.725;
        if (goals.selectedIndex == 1) {
            bmr = bmr - (bmr / 100) * 20;
        }
        else if (goals.selectedIndex == 2) {
            bmr = bmr;
        }
        else if (goals.selectedIndex == 3) {
            bmr = bmr + (bmr / 100) * 20;
        }
    }
 }
    console.log(bmr);
    return false;
}

let btn = document.querySelector('.btn');
btn.onclick = caloryCalc;
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-top: 300px;
    text-align: center;
    font-weight: 300;
    font-size: 24px;
    color: #ffffff;
    background-image: linear-gradient(-122deg, rgb(100, 0, 190), rgb(190, 0, 160), rgb(225, 0, 55));
    background-repeat: no-repeat;
    height: 680px;
}
h1 {
    text-align: center;
}
input:focus {
    background: #eaeaea;
}
form {
    width: 340px;
    margin: 0 auto;
}
.field {
    clear: both;
    text-align: right;
}
label {
    float: left;
    padding-right: 10px;
}
#out {
    font-weight: 300;
    font-size: 40px;
}
.btn {
    margin-top: 15px;
    cursor: pointer;
    border: 1px solid #ffffff;
    width: 90px;
    background: #fff;
    padding: 5px;
    font-weight: 600;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="form-wrap">
            <div class="profile">
                <h1>Расчет калорий</h1>
            </div>
        <form action="">
    
        <fieldset>
            <legend>Физические данные:</legend>
            <div class="field"><label for="weight">Веc: </label>
                    <input type="text" id="weight" required placeholder="Ваш вес, кг" autofocus>
            </div>
            <div class="field"><label for="growth">Рост: </label>
                    <input type="text" id="growth" required placeholder="Ваш рост, см">
            </div>
            <div class="field"><label for="age">Возраст: </label>
                <input type="text" id="age" required placeholder="Ваш возраст, лет">
            </div>

        
<!-- Физическая активность -->

        <select name="activity" id="activity">
            <option value="Выберите активность">Выберите активность</option>
            <option value="Низкая">Низкая</option>
            <option value="Средняя">Средняя</option>
            <option value="Высокая">Высокая</option>
        </select>

<!-- Цели -->

        <select name="goal" id="goal">
            <option value="Выберите цель">Выберите цель</option>
            <option value="Похудение">Похудение</option>
            <option value="Поддержание">Поддержание</option>
            <option value="Набор">Набор</option>
        </select>
    </fieldset>
        <input type="submit" class="btn" value="Расчитать">
    </form>

    <p id="out">Результат: </p>
</div>
    <script src="./js/script.js"></script>
</body>
</html>

5
  • с 0, но вопрос не в этом
    – Vanya228
    11 авг 2019 в 20:54
  • А зачем вообще столько if'ов? почему нужный коэф. просто не передать в value option'а ?
    – user26807
    11 авг 2019 в 20:56
  • 3
    Если вы написали, то почему просто не проверили по выводам console.log(...) в нужных вам местах со всеми значениями? А еще лучше конечно дебаггер в браузере использовать и вообще пошагово весь код просмотреть.
    – Alex Krass
    11 авг 2019 в 20:56
  • 2
    Как обычно - если происходит не то, что ожидается, то нужно выводить интересующие переменные на печать и смотреть то ли в них находится, сто ожидается. 11 авг 2019 в 20:57
  • Делал консоль.лог но в итоге в нужный блок If else не попадал.
    – Vanya228
    11 авг 2019 в 21:41

1 ответ 1

3

На 30 строке пропустили } (перед else if (activity.selectedIndex == 2) ), и при этом было одно лишние закрытие ниже по коду, почти в конце функции (перед console.log(bmr); ).

function caloryCalc(){
    // НЕ ЗАБЫТЬ ОПТИМИЗИРОВАТЬ!!!!!

    let weight = document.querySelector('#weight').value;
    let growth = document.querySelector('#growth').value;
    let age = document.querySelector('#age').value;

    // Формула Base metabolic rate -bmr
    weight = parseInt(weight);
    growth = parseInt(growth);
    age = parseInt(age);

    bmr = 88.36 + (13.4 * weight) + (4.8 * growth) - (5.7 * age);

    let activity = document.getElementById('activity');
    let goals = document.getElementById('goal');
    
    if (activity.selectedIndex == 1) {
        bmr *= 1.375;   // low activity

        if (goals.selectedIndex == 1) {
            bmr = bmr - (bmr / 100) * 20;
        } else if (goals.selectedIndex == 2) {
            bmr = bmr;
        } else if (goals.selectedIndex == 3) {
            bmr = bmr + (bmr / 100) * 20;
        }
    } else if (activity.selectedIndex == 2) {
        bmr *= 1.55;    // middle activity
        
        if (goals.selectedIndex == 1) {
            bmr = bmr - (bmr / 100) * 20;
        } else if  (goals.selectedIndex == 2) {
            bmr = bmr;
        } else if  (goals.selectedIndex == 3) {
            bmr = bmr + (bmr / 100) * 20;
        }
    } else if  (activity.selectedIndex == 3) {
        bmr *= 1.725;
        if (goals.selectedIndex == 1) {
            bmr = bmr - (bmr / 100) * 20;
        } else if  (goals.selectedIndex == 2) {
            bmr = bmr;
        } else if  (goals.selectedIndex == 3) {
            bmr = bmr + (bmr / 100) * 20;
        }
    }
 
    console.log(bmr);
    return false
}

let btn = document.querySelector('.btn');
btn.onclick = caloryCalc;
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-top: 300px;
    text-align: center;
    font-weight: 300;
    font-size: 24px;
    color: #ffffff;
    background-image: linear-gradient(-122deg, rgb(100, 0, 190), rgb(190, 0, 160), rgb(225, 0, 55));
    background-repeat: no-repeat;
    height: 680px;
}
h1 {
    text-align: center;
}
input:focus {
    background: #eaeaea;
}
form {
    width: 340px;
    margin: 0 auto;
}
.field {
    clear: both;
    text-align: right;
}
label {
    float: left;
    padding-right: 10px;
}
#out {
    font-weight: 300;
    font-size: 40px;
}
.btn {
    margin-top: 15px;
    cursor: pointer;
    border: 1px solid #ffffff;
    width: 90px;
    background: #fff;
    padding: 5px;
    font-weight: 600;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="form-wrap">
            <div class="profile">
                <h1>Расчет калорий</h1>
            </div>
        <form action="">
    
        <fieldset>
            <legend>Физические данные:</legend>
            <div class="field"><label for="weight">Веc: </label>
                    <input type="text" id="weight" required placeholder="Ваш вес, кг" autofocus>
            </div>
            <div class="field"><label for="growth">Рост: </label>
                    <input type="text" id="growth" required placeholder="Ваш рост, см">
            </div>
            <div class="field"><label for="age">Возраст: </label>
                <input type="text" id="age" required placeholder="Ваш возраст, лет">
            </div>

        
<!-- Физическая активность -->

        <select name="activity" id="activity">
            <option value="Выберите активность">Выберите активность</option>
            <option value="Низкая">Низкая</option>
            <option value="Средняя">Средняя</option>
            <option value="Высокая">Высокая</option>
        </select>

<!-- Цели -->

        <select name="goal" id="goal">
            <option value="Выберите цель">Выберите цель</option>
            <option value="Похудение">Похудение</option>
            <option value="Поддержание">Поддержание</option>
            <option value="Набор">Набор</option>
        </select>
    </fieldset>
        <input type="submit" class="btn" value="Расчитать">
    </form>

    <p id="out">Результат: </p>
</div>
    <script src="./js/script.js"></script>
</body>
</html>

1
  • > не попадает в конструкцию else if - однако, какой интересный язык, что в нем есть конструкции, в которых "иначе" стоит перед "если" (судя по названию темы) )) Я, конечно, не знаток языков программирования, но сколько возился с программаи, такого не встречал. Ради этого обращу на этот язык внимание)).
    – mathem
    11 авг 2019 в 22:31

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.