JavaScript-калькулятор с использованием parseFloat

Question

Мне нужна помощь в отделении колледжа. Мне нужно создать калькулятор BMI, используя функцию calcBMI(), которая примет значения из текстовых входов и поместит общее количество на 3-й вход. Вычисленное значение затем необходимо преобразовать в число с плавающей запятой, используя функцию parseFloat(). Текстовые входы затем должны быть ссылками внутри функции с использованием метода getElementById(). Наконец, расчет должен быть сформирован путем добавления прослушивателя событий, который прослушивает событие клика на кнопке, которая была включена в форму, и выполняет функцию calcBMI(), если это событие происходит.

Я не совсем знаю, как использовать функцию parseFloat(), которая, как мне кажется, мешает мне завершить этот проект. И, кстати, я уже спросил своего профессора, и он сказал, что он не может использовать использование jQuery или любой другой библиотеки, только чистый JavaScript.

<form method="post" name="frmBMI"> 
<div> 
    <label for="bmi_weight">Weight</label> 
    <input type="text" id="bmi_weight" placeholder="Weight"> lbs. 
</div> 

<div> 
    <label for="bmi_height">Height</label> 
    <input type="text" id="bmi_height" placeholder="Height"> in. 
</div> 

<div> 
    <label for="bmi_amt">BMI</label> 
    <input type="text" id="bmi_amt" placeholder="Total" readonly> 
</div> 

<div> 
    <input type="submit" onclick="calcBMI();" value="Calculate BMI"> 
</div> 
</form> 

<script type="text/javascript"> 
function calcBMI() { 
    h = document.getElementById ("bmi_height").value; 
    w = document.getElementById ("bmi_weight").value; 
    document.getElementById ("bmi_amt").innerHTML = h/w; 
} 
</script> 

Answer 1

Вы можете передать значение поля ввода функции parseFloat, которая в случае успеха будет возвращать число, которое вы могли бы использовать, чтобы сделать арифметику с:

function calcBMI() { 
    var h = parseFloat(document.getElementById("bmi_height").value); 
    var w = parseFloat(document.getElementById("bmi_weight").value); 
    var result = h/w; 
    document.getElementById ("bmi_amt").innerHTML = result; 
} 

Конечно пользователь может ввести любой произвольный текст в поле ввода, и вы бы лучше проверить, если это правильный номер с помощью функции isNaN:

function calcBMI() { 
    var h = parseFloat(document.getElementById("bmi_height").value); 
    var w = parseFloat(document.getElementById("bmi_weight").value); 
    if (isNaN(h) || isNaN(w)) { 
     alert('Please enter a valid number'); 
    } else { 
     var result = h/w; 
     document.getElementById("bmi_amt").innerHTML = result; 
    } 
} 

Там также что важно знать при использовании функции parseFloat. Это культурная агностика. Это означает, что десятичный разделитель равен всегда.. Поэтому, если ваша локальная культура пользователей использует , в качестве разделителя десятичных чисел, вы можете заменить ее . перед передачей ее функции parseFloat. В противном случае функция parseFloat прекратит разбор по знаку ,, и вы можете получить неожиданные результаты.

---

UPDATE:

Чтобы избежать форм перезагрузки вы должны убедиться, что вы возвращаете false из onclick обработчика вашей кнопки отправки:

<input type="submit" onclick="calcBMI(); return false;" value="Calculate BMI" /> 

или просто иметь свою calcBMI функцию Возврат false:

function calcBMI() { 
    var h = parseFloat(document.getElementById("bmi_height").value); 
    var w = parseFloat(document.getElementById("bmi_weight").value); 
    if (isNaN(h) || isNaN(w)) { 
     alert('Please enter a valid number'); 
    } else { 
     var result = h/w; 
     document.getElementById("bmi_amt").innerHTML = result; 
    } 

    return false; 
} 

, а затем при регистрации ваш onclick обработчик возвращает результат от этой функции:

<input type="submit" onclick="return calcBMI();" value="Calculate BMI" /> 

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