知ってた?ナルホド! BLOG

2019.02.12

output要素を使ってBMI数値を表示しよう!

WRITTEN BY

 | 

HIRAHARA NATSUMI

output要素を使ってBMI数値を表示しよう!

こんにちは!コーダーの平原です。

弊社では空前のダイエットブームが来ております。
糖質制限やおやつ断ちと、みんなのストイックな姿勢に私も何かやらねば…と思い、
output要素でBMI数値を表示してみよう!と思いました。

※BMI数値:体重と身長の関係から算出される、人の肥満度を表す体格指数の値。

  1. output要素とは
  2. output要素の属性
  3. oninput
  4. BMI数値の表示
  5. まとめ

1. output要素とは

output要素とは、formの部品の1つとして計算結果やユーザー操作の結果を表すことができるHTMLのコンテナー要素です。

2. output要素の属性

output要素には、以下のような属性があります。

for
他の要素のidの空白区切りのリストで、入力値が計算に使用される要素を示します。
指定する値が複数ある場合は半角スペースで区切ります。
form
この要素に出力される計算値の計算を行うform要素を指定します。
同じ文書内のform要素のidを属性値としますが、output要素がform要素の子要素として配置する場合は、この属性は指定する必要はありません。
指定する値が複数ある場合は半角スペースで区切ります。
name
出力欄を識別する為の名前を指定します。

3. oninput

oninputは、JavaScriptのイベントハンドラで、入力時に発火して処理を実行します。
今回の場合は、form要素にoninputを指定し、form内のフィールドに値が入力された際に、output要素に指定したname属性に値の結果を入れるということをします。

4. BMI数値の表示

こちらがoutput要素の特徴や使用ルールに沿って作成したBMI数値の表示です。

【BMI : 肥満度】
18.5未満 : 低体重
18.5〜25未満 : 普通体重
25〜30未満 : 肥満(1度)
30〜35未満 : 肥満(2度)
35〜40未満 : 肥満(3度)
40以上 : 肥満(4度)

5. まとめ

output要素では、formタグ又はform属性で、output要素に出力される数値の計算を行うことで、計算結果の数値を表示することができました。普段あまり使用することはない要素ではありますが、算術演算子のおさらいにもなり、より知見が深まりました!

参考サイト :

PAGE TOP