こんにちは。Takeyemaです。

先日、とある見積もりフォームみたいなものを書く必要がありまして。
ちょっと調べてみたら、いまはHTML5で簡単に計算できるらしいじゃないですか。
勉強不足でアレなんですが、HTML5ホント便利ですね。

HTML <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>



0

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>

+

=0


うむ、簡単だ。
すぐできたわい。と思ったのですが、これがまたIE11でもEdgeでも動かない。
おい…ビル…。

コンソールを見ると、input要素のvalueを定義していない、、、と出る。
この調子で一つひとつ潰していっても、やれこれが定義されていない、やれこの関数は知らないだの言って
デバックしていくうちにスクリプトの構造も大きく変わってくるし、やたらと関数を使わなけりゃならないで本当に大変です。

IE/EdgeでDOM要素を指定するには、document.から指定してやらないとだめなようです。
また結果を表示させるには、getElementByIdやgetElementByNameなどの関数を使う必要があります。

JacaScript 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文を使ってやらないと値が取れない模様。

ビル…あのさぁ…

Comments are closed.

  • Facebookのロゴ
  • Twitterのロゴ

Copyright © 2011 SSI Laboratory Inc. All Rights Reserved.