知ってた？ナルホド！
こんにちは！コーダーの平原です。
弊社では空前のダイエットブームが来ております。
糖質制限やおやつ断ちと、みんなのストイックな姿勢に私も何かやらねば…と思い、
output要素でBMI数値を表示してみよう！と思いました。
※BMI数値：体重と身長の関係から算出される、人の肥満度を表す体格指数の値。
1. output要素とは
output要素とは、formの部品の１つとして計算結果やユーザー操作の結果を表すことができるHTMLのコンテナー要素です。
2. output要素の属性
output要素には、以下のような属性があります。
指定する値が複数ある場合は半角スペースで区切ります。
同じ文書内のform要素のidを属性値としますが、output要素がform要素の子要素として配置する場合は、この属性は指定する必要はありません。
指定する値が複数ある場合は半角スペースで区切ります。
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要素に出力される数値の計算を行うことで、計算結果の数値を表示することができました。普段あまり使用することはない要素ではありますが、算術演算子のおさらいにもなり、より知見が深まりました！
参考サイト :
