Javascript 初歩的な計算フォーム radioボタンの作り方・oninputで表示など
Javascriptで作る初歩的な計算フォーム。html5 で使えるplaceholder属性やstep・min・max属性を使った数値入力フォームやradioボタンの作り方。入力フォームに入力されると即座に計算結果が表示される oninput のやり方。
サイト作成でJavascriptなんて使ったことない
とあるダイエット関連のサイトを作っている時にBMIや基礎代謝量などを計算するフォームを設置したくなり、最初はWordPressで作成してたサイトということでプラグインを検索した結果 Calculated Fields Form という日本語に対応していないプラグインがみつかり使っていた。
Calculated Fields Formは結構高度な計算もできる計算プラグインのようで、一度計算式を設定するとショートコードで埋め込むことができて便利だったのだが、いかんせん説明とかが英語で使いきれないし、そんな高度な計算をするわけでないのでいらないなと考え始めた。
ほんのちょっとは触れるPHPでできないかなと考えていたのだが、PHPでは私がやりたかったonclick的？な挙動をする仕組みを作ることが私には簡単にはできない。ということで触ったことのないJavascriptでやってみるかということに。
Javascriptとhtml5初歩的な計算フォームのサンプル
計算フォームといっても足し算や掛け算、割り算、引き算ができればいいのでそんなむきになってJavascriptを勉強する気もないので力を抜いてサンプルを作ってみた。
Javascriptで足し算計算フォーム oninputで即答え表示 <output>出力
<form oninput="x.value=Number(a.value)+Number(b.value);">
<input type="number" name="a" placeholder="aの値"> ＋
<input type="number" name="b" placeholder="bの値"> ＝
<output name="x">0</output>
</form>１行目、<form>タグ内にJavascriptを書いてる。oninputで<input> name属性 a bに数字が入力されると計算の答えが即４行目の<output name="x">に反映される。最初は０と表示してある。
<input>のplaceholder属性に、サンプルではそれぞれのname属性のvalueということでaの値、bの値としてるけど別にいらない（苦笑）placeholder属性を削除して代わりにvalue="0″と書けば 0 ＋ 0 ＝ 0 という表示で始まる。
Number()というのは文字列を数値に変換する。数値に変換できない場合 NaN と表示される。大文字の数字ならちゃんと数値に変換される。
input name属性 a のvalue（文字列・数字）とinput name属性 b のvalue（文字列・数字）をそれぞれ数値に変換して足したのが、output name属性 x のvalue（数値）という処理をし、<output></output>の中に表示している。
Javascriptとhtml5でBMI計算 toFixed() step属性 max属性 min属性
<form oninput="b=Number(t.value)/(Number(s.value/100)*Number(s.value/100));bmi.value=b.toFixed(1);">
身長： <input type="number" name="s" step="0.1" min="50" max="250" placeholder="単位はｃｍでOK">
体重： <input type="number" name="t" step="0.1" min="10" max="500" placeholder="単位はｋｇでOK">
あなたのBMIは <output name="bmi"></output>BMI = 体重（ｋｇ） / ( 身長（ｍ）× 身長（ｍ）)
１行目、<form> の中で oninput で Javascriptの処理をしているのは足し算計算フォームと同じ。計算が少し複雑になっているので２段階で処理してる感じ。name属性は、身長s 体重t 計算結果bmi。１段階目で b にBMI計算値を入れてる。
toFixed()で小数点以下の数字処理
１段階目でbに入れたBMI計算値を、２段階目 bmi.value=b.toFixed(1) となってるところで、name属性bmiの値はbをtoFixed(1)したものですよと処理してる。
toFixed() てなんだという話になると思うが雑に理解したところによると、toFixed()てのは小数点以下の数値を丸めて（四捨五入して）数字文字列を返すそうな。
例えば1234.56という数値をtoFixed()すると1235という数字文字列を返す。引数を渡して小数点以下の桁数を指定することができるそうである。例えば1234.56という数値をtoFixed(1)すると1234.6となる。
html5 <input type="number">の属性使う
２から３行目、<input type="number"> 数値入力欄についてだが、html5 になってhtmlタグ自体も進化で、もう全くついていけないので少し学んでみた。
step属性 数値入力欄の横に上下向きの三角形のボタンがある。スピンボタン（増減ボタン）と言うらしく上向きをクリックすれば数値が増、下向きをクリックすれば数値が減する。step属性は増減幅を指定できる。BMI計算フォームの場合 step="0.1″ 0.1 刻みで増減するように指定している。step属性を指定しなかった場合、デフォルトでは 1 づつ増減する。
min属性 入力する数値の最小を指定できる。ただし入力できるのであまり意味がない。指定した数値より小さい数値を入力すると減側のスピンボタンは操作できなくなり、増側のスピンボタンを操作すると指定した最小値まで数値が増える。
max属性 入力する数値の最大を指定できる。指定した数値より大きい数値を入力すると増側のスピンボタンは操作できなくなり、減側のスピンボタンを操作すると指定した最大値まで数値が減る。
placeholder属性 数値入力前に注意事項などを表示できる。数値を入力すると表示されなくなる。BMI計算フォームでは入力する身長・体重の単位を注意事項として表示している。
radioボタンで条件選択入力値と掛け算 onclickで基礎代謝量計算
<form>
<table style="width: 100%;">
<tbody>
<tr>
<th colspan="3">性別・年齢</th>
</tr>
<tr>
<td>年齢</td>
<td>女性</td>
<td>男性</td>
</tr>
<tr>
<td>12～14才</td>
<td><input type="radio" name="k" value="29.6"></td>
<td><input type="radio" name="k" value="31.0"></td>
</tr>
<tr>
<td>15～17才</td>
<td><input type="radio" name="k" value="25.3"></td>
<td><input type="radio" name="k" value="27.0"></td>
</tr>
<tr>
<td>18～29才</td>
<td><input type="radio" name="k" value="22.1"></td>
<td><input type="radio" name="k" value="24.0"></td>
</tr>
<tr>
<td>30～49才</td>
<td><input type="radio" name="k" value="21.7"></td>
<td><input type="radio" name="k" value="22.3"></td>
</tr>
<tr>
<td>50～69才</td>
<td><input type="radio" name="k" value="20.7"></td>
<td><input type="radio" name="k" value="21.5"></td>
</tr>
</tbody>
</table>
体重：<input type="number" name="t" step="0.1" min="15" max="500" placeholder="kg">
<input type="button" onclick="kt.value=Math.round(Number(k.value)*Number(t.value));" value="計算する">
基礎代謝量<output name="kt"></output> kcal
</form>radioボタンで年齢・性別該当条件選択
<input type="radio"> ７行目から１６行目の様に<table>のセルに年齢・性別の条件別でradioボタンを設置。name属性 k それぞれの条件別で value="数値" と数値をセットしている。
Math.round()で小数点以下四捨五入 計算するボタンonclickで計算
<input type="number"> ３９行目体重入力欄、name属性 t 各属性の指定はBMI計算フォームと同じ。html5 <input type="number">の属性使う を見て頂戴。
<input type="button"> ４０行目、「計算する」ボタンをクリック onclick で計算を実行する。足し算、BMI計算では <form> にJavascriptを入れてたけど、ここでは <input type="button"> に入れる。
Math.round() ４０行目、計算式をMath.round()の引数に入れる。計算式自体は、radioボタンで選択した条件の数値 k と体重欄に入力された数値 tを掛けてるだけ。それで、Math.round() て一体何してるのてことだけど、小数点を四捨五入して整数にしている。例えば、1287.5なら1288となる。1287.4なら1287となる。
<output name="kt"></output> ４１行目、計算結果数値 ktの値 を <output></output>に出力する。