人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

●質問者: tontonpokopoko
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:JavaScript コメント欄 コード ボックス リスト
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● pahoo
●60ポイント

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>
◎質問者からの返答

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

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

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

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


2 ● kebo987654
●100ポイント ベストアンサー
<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)))」

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

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

◎質問者からの返答

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日目以降も続く↓


3 ● juner
●60ポイント

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

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

今回の処理は

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

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

// 前後空白除去
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);
}

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

◎質問者からの返答

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ