Форма Javascript для калькулятора калорій

Я намагаюся зробити свою першу спробу Javascript, використовуючи введення користувача, а потім змінюючи html елемента, щоб виплюнути значення. Це калькулятор калорій. Ось мій HTML, мій javascript і пояснення того, що, на мою думку, ПОДАЄТЬСЯ відбуватися з моїми обмеженими знаннями:

Я очікую, що ця функція спочатку перевірить, чи відмітив користувач чоловічого чи жіночого. Потім, якщо вони відмічають male, він створює нову змінну (не впевнений, що це буде найоптимальніший спосіб зробити це в будь-якому випадку0, де він додає male (оскільки я ставлю var male = document.getElementsByName ("male"). Value та його на вході радіостанції, я прочитав, що він буде читати те, що ви ставите як значення, тому я припустив, що "male" у змінній maleCals стане таким значенням, 66.47. Потім я припустив, що зріст і вага будуть читатися як будь-яке число користувач вводить форми введення, а потім виплескується як абзац для

елемент з ідентифікатором totalCals.

Моя дилема полягає в тому, що це просто не працює, коли ви вводите значення, нічого не пишеться в

Будь-які пропозиції були б корисними.

2 відповіді 2

Є численні проблеми.

Почнемо з очищення HTML:-

Розміщуючи вхідні елементи всередині тегів міток, користувач тепер може клацнути в будь-якому місці мітки, щоб надати вхідному елементу фокус.

Також зауважте, що обидві перемикачі повинні мати однаковий атрибут імені. Отже, щоб розрізнити їх, вони повинні мати різні атрибути ідентифікатора.

У деяких браузерах вам потрібно розмістити () в кінці імені кожного обробника події. Якщо ви не можете передбачити, який браузер буде використовуватися клієнтом, тоді краще грати в безпеці. Тому завжди включайте їх.

Щоб полегшити тестування, я додав вибраний атрибут до перемикача "Чоловічий", а атрибути значення за замовчуванням - до інших елементів введення. Будь ласка, видаліть їх перед розгортанням.

Атрибути значення на перемикачах - це справді речі, які належать до модель (тобто javascript) не в вид (тобто html).

Тепер додайте трохи стилю в CSS:-

І нарешті очистіть Javascript:-

Я знаю, що багато людей не погоджуються, але мені особисто дублювання коду відволікає. У вашому коді document.getElementById (id) часто повторюється. Тож я витягнув цю поведінку у невеличку допоміжну функцію find. Тепер решта коду читається набагато краще.

Оскільки ви застосовуєте однаковий коефіцієнт масштабування до ваги, зросту, незалежно від статі, я перемістив це масштабування, і тепер воно більше не дублюється.

Зверніть увагу, що я припускав, що відсутні кінцеві дужки повинні йти в кінці формул. Я не можу це перевірити, оскільки не маю доступу до вихідного документа, де ви виявили ці формули.

Ви також використовували "x" всередині формули замість "*". Це поширена помилка при переході від письмової алгебри до комп'ютерних алгоритмів. Потурбуйся про це.

Нарешті, я видалив усі непотрібні (і відволікаючі) крапки з комою. У Javascript є лише кілька рідкісних випадків, коли ви насправді повинні використовувати крапку з комою.