יצירת מחשבון BMI על ידי שימוש בטופס אלמנטור
מחשבון BMI פשוט באמצעות טופס אלמנטור ו JavaScript בו המשתמש יזין את הגובה והמשקלו שלו ויקבל תוצאה של ה-BMI
בהינתן שחישוב BMI הוא משקל לחלק לגובה בריבוע:
BMI = (weight) / (height * height)
ראשית ניצור באלמנטור טופס פשוט עם שדה גובה ושדה משקל ומתחתיו וידג'ט כותרת פשוט
0
נגדיר לטופס, לכותרת ולכל אחד מהשדות ID ואחר כך ניצור לכל אחד מהם משתנה ב-JavaScript באמצעות המתודה querySelector עם הסלקטור של כל אחד מהם
const form = document.querySelector("#cal-form > div > form")
const height = document.querySelector("#form-field-height")
const weight = document.querySelector("#form-field-weight")
const calculateResult = document.querySelector("#calculate-result > div > h2")
נאזין לכפתור "סאבמיט" באמצעות addEventListener עם פונקציה שתציג הודעה עם תוצאת החישוב של ה-BMI
חשוב להוסיף לפונקציה את המתודה preventDefault שמבטלת את פעולת ברירת המחדל של הטופס שזה "שליחה" ותבצע במקומו את פעולת החישוב
form.addEventListener("submit", validation)
function validation(e){
e.preventDefault()
let heightBmi = Math.pow(height.value, 2)
let weightBmi = parseInt(weight.value)
let message = weightBmi / heightBmi
calculateResult.innerText = message
}
נוסיף לתוך הפונקציה את החישוב של ה-BMI שזה משקל (בק"ג) מחולק בגובה (במטרים) בריבוע.
נשתמש במתודה Math.pow כדי לבצע את החישוב של הגובה בריבוע
ובמתודה parseInt כדי להפוך למספר את הנתון של משקל שמתקבל מהמשתמש כטקסט
let heightBmi = Math.pow(height.value, 2)
let weightBmi = parseInt(weight.value)
let message = weightBmi / heightBmi
את כל הקוד הזה נוסיף בעמוד באמצעות ווידג'ט מסוג HTML בתוך תגית סקריפט
<script>
const form = document.querySelector("#cal-form > div > form")
const height = document.querySelector("#form-field-height")
const weight = document.querySelector("#form-field-weight")
const calculateResult = document.querySelector("#calculate-result > div > h2")
form.addEventListener("submit", validation)
function validation(e){
e.preventDefault()
let heightBmi = Math.pow(height.value, 2)
let weightBmi = parseInt(weight.value)
let message = weightBmi / heightBmi
calculateResult.innerText = message
}
</script>