読者です 読者をやめる 読者になる 読者になる

知らないことを調べるブログ

映画の分からないところを調べてまとめる場所にしていきます。

アンケートフォーム作成2

日記

 前の記事でこんなことを言った。
 

inputのテキストに位置を特定する数値をidとして設定して、入れ替え時に検索するという試作プログラムを作った。いちおう正常に動作している。でも、それよりも、inputのテキストに共通のクラスを設定して、指定したdiv内の当該クラスをgetElementsByClassNameで配列にして昇順で入れ替えていくやり方がスマートかも!? と期待している。まだ試していない・・・でも絶対大丈夫だ!

 
 試したが、行数が増えてしまった。なので、classではなくidでやることにした。こんな感じでやれば行数が少なく済んだ。HTML側では、選択肢を位置が特定できるようなidで管理している(例:id="q1c1txt")。iやjをidに当てはめると、繰り返しになる。qAryは、質問や選択肢の位置を記録する2次元配列。
 

for(var i = qAry.length - 1; i > q; i--){
	document.getElementById("q" + (i + 1) + "txt").value = document.getElementById("q" + i + "txt").value;
	for(var j = qAry[i][0]; j > 0; j--){
		document.getElementById("q" + (i + 1) + "c" + j + "txt").value = document.getElementById("q" + i + "c" + j + "txt").value;
		for(var k = 1; k <= qAry[i][j]; k++){
			document.getElementById("q" + (i + 1) + "c" + j + "n" + k + "txt").value = document.getElementById("q" + i + "c" + j + "n" + k + "txt").value;
		}
	}
}

 
 一方、getElementsByClassNameで配列を作るアイデアは悪くなかった。セーブ関数でこのように利用した。qBoxは質問が入るdivのclass。すべてのinput type="text"はtextというクラスを持っている。繰り返しになる。
 

for(var i = 0; i < qBox.length; i++){
	var text = qBox[i].getElementsByClassName("text");
	for(var j = 0; j < text.length; j++){
		if(j > 0) str += ",";
		str += text[j].value.replace(/,/g, "#2c#");
	}
	str += "\r\n";
}

 
 
 さて、「選択肢の挿入・削除機能」が完成した。興奮する日々だった。いまは「入力した質問文や選択肢をアンケートフォームの形にしてHTMLで出力する機能」を作っている。こちらは予想通り、既に完成品のアンケートフォームがあるので、ほんとうに仕様通りに変数を埋め込んで出力するだけだった。さくさく進むので、興奮している。