מחשבון BMI עם טופס אלמנטור

יצירת מחשבון 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>
				
			

ליצירת קשר השאירו פרטים כאן

שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב whatsapp