HTML5で追加されたoutput要素を使って簡単に計算
こんにちは。Takeyemaです。
先日、とある見積もりフォームみたいなものを書く必要がありまして。
ちょっと調べてみたら、いまはHTML5で簡単に計算できるらしいじゃないですか。
勉強不足でアレなんですが、HTML5ホント便利ですね。
<form oninput="op1.value = Number(a.value) + Number(b.value);">
<input type="number" name="a" value="0" size="5">
＋
<input type="number" name="b" value="0" size="5">
＝
<output name="op1">0</output>
</form>
oninputに各要素のname属性を使って計算してあげると、output要素に結果を吐き出すことができるんですね。
簡単ですし、スクリプトを別に用意する必要がないので、ページも軽くなりますし、管理もしやすくなります。
スクリプトを使うとセキュリティが気になってきますし、読み込み順番などによってはサイトが重くなってしまいますがその心配も減ります。
しかし残念なことにIEではサポートされていないとのこと…。
ちょ…ビル…。
仕方ないのでjavascriptを使うか…
JacaScript
function func() {
var dd = parseFloat(document.F1.d1.value);
var ee = parseFloat(document.F1.e2.value);
var ans1 = dd + ee;
document.F1.op1.value =ans1;
}
HTML
<form name="F1">
<input type="number" name="d1">
+
<input type="number" name="e2">
=<output name="op1">0</output>
<input type="button" value="計算" onclick="func()">
</form>
うむ、簡単だ。
すぐできたわい。と思ったのですが、これがまたIE11でもEdgeでも動かない。
おい…ビル…。
コンソールを見ると、input要素のvalueを定義していない、、、と出る。
この調子で一つひとつ潰していっても、やれこれが定義されていない、やれこの関数は知らないだの言って
デバックしていくうちにスクリプトの構造も大きく変わってくるし、やたらと関数を使わなけりゃならないで本当に大変です。
IE/EdgeでDOM要素を指定するには、document.から指定してやらないとだめなようです。
また結果を表示させるには、getElementByIdやgetElementByNameなどの関数を使う必要があります。
function func2(){
var gg = parseFloat(document.F2.g1.value);
var hh = parseFloat(document.F2.h2.value);
var ans2 = parseFloat( gg + hh );
console.log( gg );
console.log( hh );
console.log( ans2 );
document.getElementById('op2').textContent = ans2;
}
HTML
<form name="F2">
<input type="number" name="g1" id="g1">
+
<input type="number" name="h2" id="h2">
=
<p id="op2" style="display:inline;"></p>
<input type="button" value="計算" onclick="func2()">
</form>
なお、inputタグのtype属性、radioやcheckbox等の場合、for文を使ってやらないと値が取れない模様。
ビル…あのさぁ…
