Edge, IEを許さない(form編)

簡単なアンケートに答えて採点するという機能を作ってました。

仕様としては「3択のラジオボタンから選択された項目で点数を加算していく」というもの。そこで適当にggって作ったものがこちら。

html


<form action="#">
	<div>質問1
		<label><input type="radio" name="q1" value="0"><span>0点</span></label>
		<label><input type="radio" name="q1" value="1"><span>1点</span></label>
		<label><input type="radio" name="q1" value="2"><span>2点</span></label>
	</div>
	<div>質問2
		<label><input type="radio" name="q2" value="0"><span>0点</span></label>
	...
</form>

javascript


var total = 0;
for ( var i = 1; i <= 10; i++ ) {
	eval( "var a" + i + " = document.form.q" + i + ".value;" );
	total = parseInt( total ) + parseInt( eval( "a" + i ) );
}
//ここから合計点数を表示するコード

ざっと解説すると「一つのformにラジオボタンがたくさんあって名前で区別している」という感じです。よくよく考えると脳筋にもほどがあるな…

eval()はリファレンスにめちゃめちゃ「必要以上に eval を使用しないで!」と書かれている通り、「便利だけどその中に第三者が悪意のあるコードをぶち込めるよ!」って感じで非推奨なやつです。今回は変数の生成とinputのname(q + 番号で)の識別にしか使っていないので問題は(多分)ありませんが。

で、これの何が問題かというとchrome、iOS Safariでは動いたのですがIE、Edgeでは動きませんでした。

eval()がダメなのかと思いせーこらとforの中身を全部書いてみたのですがこれもダメ。

最終的に

document.forms[ i ].elements[ j ]

って形で書けることにたどり着きました。i番目のformとその中身j番目のinputってことですね(多分)

html


<form action="#">
	<label><input type="radio" name="q5" value="1"><span>1点</span></label>
	<label><input type="radio" name="q5" value="2" checked><span>2点</span></label>
	<label><input type="radio" name="q5" value="3"><span>3点</span></label>
</form>

javascript


var total = 0;
var a = new Array( 10 );
for ( var i = 0; i < 10; i++ ) {
	for ( var j = 0; j < document.forms[ i ].elements.length; j++ ) {
		if ( document.forms[ i ].elements[ j ].checked ) {
			a[ i ] = document.forms[ 0 ].elements[ j ].value;
		}
	}
	total = parseInt( total ) + parseInt( a[ i ] );
}
//ここから合計点数を表示するコード

結局原因は分かっておりませんが非推奨なeval()から逃れられたことですし良しとします。