javascriptの勉強をしています。

フォームで複数質問のリストボックスから、値を求めるにはどう書けばいいのでしょうか?複数の関数を作るのは効率が悪いので配列やlengthを使うと思うのですが。
(コードは長いようなのでコメント欄にあります)

結果は、
”阪神×2|横浜×4|巨人×1”

という感じで表示するのが望みです。また途中の日にちに数字が書き込まれなければ、結果を飛ばすのではなく”-”としたいと思います。

"阪神×2|-|巨人×1"
説明が悪く申し訳ありません。わからないところがあれば補足をいたします。
よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:2009/04/16 18:30:07
  • 終了:2009/04/18 13:14:04

ベストアンサー

id:kebo987654 No.2

kebo987654回答回数38ベストアンサー獲得回数102009/04/16 23:02:47

ポイント100pt
<form name="create">
	対戦カードと枚数をお書きください<br>
	1日目
	<select name="choise">
		<option value="阪神×">阪神</option>
		<option value="巨人×">巨人</option>
		<option value="横浜×">横浜</option>
		<option value="広島×">広島</option>
	</select>
	×
	<input type="text" size="2" name="number">(枚数、入力式)
	<br>
	
	2日目
	<select name="choise">
		<option value="阪神×">阪神</option>
		<option value="巨人×">巨人</option>
		<option value="横浜×">横浜</option>
		<option value="広島×">広島</option>
	</select>
	×
	<input type="text" size="2" name="number">
	<br>
	
	3日目
	<select name="choise">
		<option value="阪神×">阪神</option>
		<option value="巨人×">巨人</option>
		<option value="横浜×">横浜</option>
		<option value="広島×">広島</option>
	</select>
	×
	<input type="text" size="2" name="number">
	
	<br>↓<br>続く<br>↓<br>
	<input type="button" value="クリック" onclick="mySet()"><br>
	<input type="text" size="30" name="data">
</form>

<script type="text/javascript"><!--
function mySet(){
	var choise=document.getElementsByName('choise');
	var number=document.getElementsByName('number');
	for(var i=0,l=choise.length,str=new Array(l),n;i<l;++i){
		if(isNaN(n=parseInt(number[i].value,10)))
			str[i]="-";
		else{
			str[i]=choise[i].value+n.toString(10);
		}
	}
	document.create.data.value=str.join('|');
}
// --></script>

取得したいタグに同じname属性を指定し、

document.getElementsByName('~')

でHTMLコレクションを得るやりかたです。

'|'で区切るために構成中の文字列は配列に格納しておいて、構成が終わったらstr.join('|')で区切り文字を指定して結合しています。

有効な数字が書かれているかはisNaN関数に数字に変換したvalueを与えて区別し、

「if(isNaN(n=parseInt(number[i].value,10)))」

有効な数字だった場合は「"球団名×"+数字」を配列に加え,

無効だった場合は「"-"」を配列に加えています。

id:tontonpokopoko

kebo987654さま、返信をありがとうございました。

説明が足りなかったのに、ピンポイントの回答でした。

もっとシンプルに以下のときはどうすればいいでしょうか?

(自分で試したのですがどうもうまくいきません)

■数字を入れる入力箇所がなく、ドロップダウンのみ。

(つまり「-」は必要ありません。)

1日目

<select name="choise">

<option value="阪神×">阪神</option>

<option value="巨人×">巨人</option>

<option value="横浜×">横浜</option>

<option value="広島×">広島</option>

</select>

2日目

<select name="choise">

<option value="阪神×">阪神</option>

<option value="巨人×">巨人</option>

<option value="横浜×">横浜</option>

<option value="広島×">広島</option>

</select>

3日目以降も続く↓

2009/04/17 18:36:43

その他の回答(2件)

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332009/04/16 18:54:31

ポイント60pt

JavaScriptの部分だけ抜粋して回答します。

<script type="text/javascript">
<!--
function mySet() {
    var card1 = (document.create.Va1a.value == '') ? '-' : (document.create.Va1.value + document.create.Va1a.value);
    var card2 = (document.create.Va2a.value == '') ? '-' : (document.create.Va2.value + document.create.Va2a.value);
    var card3 = (document.create.Va3a.value == '') ? '-' : (document.create.Va3.value + document.create.Va3a.value);

    document.create.data.value = card1 + '|' + card2 + '|' + card3;
}
// -->
</script>
id:tontonpokopoko

いつもありがとうございます。

説明が悪くて申し訳ありませんでした。

kebo987654 さまが書かれている、4日目移行も繰り返されるスクリプトを求めていました。

次回からは書き方に気をつけます。

2009/04/17 18:30:56
id:kebo987654 No.2

kebo987654回答回数38ベストアンサー獲得回数102009/04/16 23:02:47ここでベストアンサー

ポイント100pt
<form name="create">
	対戦カードと枚数をお書きください<br>
	1日目
	<select name="choise">
		<option value="阪神×">阪神</option>
		<option value="巨人×">巨人</option>
		<option value="横浜×">横浜</option>
		<option value="広島×">広島</option>
	</select>
	×
	<input type="text" size="2" name="number">(枚数、入力式)
	<br>
	
	2日目
	<select name="choise">
		<option value="阪神×">阪神</option>
		<option value="巨人×">巨人</option>
		<option value="横浜×">横浜</option>
		<option value="広島×">広島</option>
	</select>
	×
	<input type="text" size="2" name="number">
	<br>
	
	3日目
	<select name="choise">
		<option value="阪神×">阪神</option>
		<option value="巨人×">巨人</option>
		<option value="横浜×">横浜</option>
		<option value="広島×">広島</option>
	</select>
	×
	<input type="text" size="2" name="number">
	
	<br>↓<br>続く<br>↓<br>
	<input type="button" value="クリック" onclick="mySet()"><br>
	<input type="text" size="30" name="data">
</form>

<script type="text/javascript"><!--
function mySet(){
	var choise=document.getElementsByName('choise');
	var number=document.getElementsByName('number');
	for(var i=0,l=choise.length,str=new Array(l),n;i<l;++i){
		if(isNaN(n=parseInt(number[i].value,10)))
			str[i]="-";
		else{
			str[i]=choise[i].value+n.toString(10);
		}
	}
	document.create.data.value=str.join('|');
}
// --></script>

取得したいタグに同じname属性を指定し、

document.getElementsByName('~')

でHTMLコレクションを得るやりかたです。

'|'で区切るために構成中の文字列は配列に格納しておいて、構成が終わったらstr.join('|')で区切り文字を指定して結合しています。

有効な数字が書かれているかはisNaN関数に数字に変換したvalueを与えて区別し、

「if(isNaN(n=parseInt(number[i].value,10)))」

有効な数字だった場合は「"球団名×"+数字」を配列に加え,

無効だった場合は「"-"」を配列に加えています。

id:tontonpokopoko

kebo987654さま、返信をありがとうございました。

説明が足りなかったのに、ピンポイントの回答でした。

もっとシンプルに以下のときはどうすればいいでしょうか?

(自分で試したのですがどうもうまくいきません)

■数字を入れる入力箇所がなく、ドロップダウンのみ。

(つまり「-」は必要ありません。)

1日目

<select name="choise">

<option value="阪神×">阪神</option>

<option value="巨人×">巨人</option>

<option value="横浜×">横浜</option>

<option value="広島×">広島</option>

</select>

2日目

<select name="choise">

<option value="阪神×">阪神</option>

<option value="巨人×">巨人</option>

<option value="横浜×">横浜</option>

<option value="広島×">広島</option>

</select>

3日目以降も続く↓

2009/04/17 18:36:43
id:juner No.3

juner回答回数21ベストアンサー獲得回数02009/04/17 03:00:45

ポイント60pt

いや、複数の関数を作るのが効率が悪いというよりも、

何度も同じ処理をするならば関数化した方が良いです。

今回の処理は

要素取得 -> 要素チェック -> 整形して返す

みたいな感じになると思われますので、以下の様にしてみました。

// 前後空白除去
function trim(_str){
	return _str.replace(/^\s+|\s+$/g, "");
}
// 数値チェック
function isNumeric(_num){
    if (_num.match(/^[1-9][0-9]*/g)){
		return true;
    }return false;
}

// 整形して返す。
function ancText(lbelem,celem){
	if(isNumeric(trim(celem.value))){
		return lbelem.value + trim(celem.value);
	}else{return "-";}
}
// 呼び出される関数
function mySet(){
	var felem =document.create;
	var card = felem.Va1.value + felem.Va1a.value;
	felem.data.value = ancText(felem.Va1,felem.Va1a)+"|"+ancText(felem.Va2,felem.Va2a)+"|"+ancText(felem.Va3,felem.Va3a);
}

こんな感じで宜しいでしょうか?

id:tontonpokopoko

junerさま、返信をありがとうございます。

分かりやすい説明でとても参考になります。

説明が悪くて申し訳ありませんでした。

kebo987654 さまが書かれている、4日目移行も繰り返されるスクリプトを求めていましたが、

また疑問がわいたときに、参考にさせていただきます。

2009/04/17 18:30:31
  • id:tontonpokopoko
    <form name="create">
    対戦カードと枚数をお書きください<br>
    1日目<select name="Va1">
    <option value="阪神×">阪神</option>
    <option value="巨人×">巨人</option>
    <option value="横浜×">横浜</option>
    <option value="広島×">広島</option>
    </select>
    ×
    <input type="text" size="2" name="Va1a">(枚数、入力式)
    <br>
    2日目<select name="Va2">
    <option value="阪神×">阪神</option>
    <option value="巨人×">巨人</option>
    <option value="横浜×">横浜</option>
    <option value="広島×">広島</option>
    </select>
    ×
    <input type="text" size="2" name="Va2a">
    <br>
    3日目<select name="Va3">
    <option value="阪神×">阪神</option>
    <option value="巨人×">巨人</option>
    <option value="横浜×">横浜</option>
    <option value="広島×">広島</option>
    </select>
    ×
    <input type="text" size="2" name="Va3a">
    <br>
    ↓<br>
    続く<br>

    <br>
    <input type="button" value="クリック" onclick="mySet()"><br>
    <input type="text" size="30" name="data">
    </form>

    <script type="text/javascript"><!--
    function mySet(){

    var card = document.create.Va1.value + document.create.Vs1a.value;
    document.create.data.value = card;

    }
    // --></script>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません