【Javascript】（2）formで取得した内容をif文で使いたい…

前回も同じタイトルで質問させて頂いております。
追記でも入りきれなかったので新しくあげました。
長くなりますが見て頂けると助かります。
コードがこちらです。

<style>
#lean_overlay{
position: fixed; z-index:100;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none;
}
.modal{
display: none;
background: none repeat scroll 0 0 #FFC0C0;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
display: none;
padding: 30px;
width: 780px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9 …
<script src="js/jquery.leanModal.min.js"></script>
<script>//ラジオ--------------------------------------------
function onRadioButtonChange() {
check1 = document.form1.Radio1.checked;
check2 = document.form1.Radio2.checked;
check3 = document.form1.Radio3.checked;
target = document.getElementById("output");

if (check1 == true) {
target.innerHTML = "ラジオ1";
}
else if (check2 == true) {
target.innerHTML = "ラジオ2";
}
else if (check3 == true) {
target.innerHTML = "ラジオ3";
}
}
window.onload = function onLoad() {
target = document.getElementById("output");
target.innerHTML = "選択してください";
}
</script>
<script>//セレクト--------------------------------------------
function onButtonClick() {
selindex = document.form1.Select1.selectedIndex;
target = document.getElementById("output1");

switch (selindex) {
case 0:
target.innerHTML = "セレクト1";
break;
case 1:
target.innerHTML = "セレクト2";
break;
case 2:
target.innerHTML = "セレクト3";
break;
}
}
window.onload = function onLoad() {
target = document.getElementById("output1");
target.innerHTML = "選択してください";
}
</script>
<script>
function hoge(){
var r=$('[name=r]:checked').val();
var s=$('[name=s]').val();
var target = document.getElementById("output3");
var list={
"1":{"5":"text_1_5","6":"text_1_6","7":"text_1_7"}
,"2":{"5":"text_2_5","6":"text_2_6","7":"text_2_7"}
,"3":{"5":"text_3_5","7":"text_3_7"}};
if(typeof list[r]!=="undefined" && typeof list[r][s]!=="undefined"){
return list[r][s];
}else{
return "nodata";
}}
window.onload = function onLoad() {
target = document.getElementById("output3");
target.innerHTML = hoge();
}
$(function() {
$( 'a[rel*=leanModal]').leanModal({
top: 100, // モーダルウィンドウの縦位置を指定
overlay : 0.5, // 背面の透明度
});
});
</script>

<form name="form1">
<input type="radio" name="r" value="1" id="Radio1" onchange="onRadioButtonChange();">1<br>
<input type="radio" name="r" value="2" id="Radio2" onchange="onRadioButtonChange();">2<br>
<input type="radio" name="r" value="3" id="Radio3" onchange="onRadioButtonChange();">3<br>
</select>
<select name="s" id="Select1">
<option value="">-</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</form>
<br>
<a rel="leanModal" href="#mymodal" onClick="onButtonClick()">Modal</a>
<div id="mymodal" class="modal">
<p id="output"></p>
<p id="output1"></p>
<p id="output3"></p>
</div>

モーダルウインドウ内に
①ラジオボタンから取得した内容のテキスト
②セレクトボックスから取得した内容のテキスト
③ラジオボタンとセレクトボックス２つ情報を取得してテキストを書き出す方法
この3つをjavascriptで設定しています。
(③は前回の質問でご教授頂いた内容を少し変えています。)

ここからが質問なんですが
①と②の内容は問題なく表示出来るのですが、③の内容がnodateとなってしまうのは何故でしょうか？
私の推測では記述方法を間違えていると思うのですが、まだまだ勉強不足でつまづいています。

皆様のお力を貸してください。どうぞよろしくお願いします。

No.2 回答者： fujillin 回答日時： 2016/03/02 10:37

こんにちは。

なんだかパッチワーク感満載ですね。

ご質問の事象の直接の原因は、hoge()が呼び出されるのはwindow.onloadで定義している最初の1回だけだからでしょう。
onload時には、（明示がないので）デフォルトとして最初のoptionが選択されていますが、value=""なのでnodataがセットされます。
前回の質問は見ていませんが、そちらの回答ではセレクトの状態が変わったら実行されるようになっていたのではないでしょうか？


差し出がましいですが、全体的に気付いた点を・・・
1）leanModalというライブラリを利用なさっていると推測しますが、これはjQuery利用のライブラリなので、どうせ使うなら全体をjQueryで記述したほうが簡単になることでしょう。
（特にname属性をそのまま要素名として特定に用いるのは、失敗するケースがあるので、あまりお勧めできません）
2）window.onloadが3箇所に見られますが、登録できる関数は一つなので、定義する毎に上書きれることになります。結局、実行されるのは、最後のものだけとなります。（ご提示の場合は、hogeだけが実行される）
3）＞①と②の内容は問題なく表示出来るのですが
　②は正しく動作しているとは思えません。なぜならoptionが4つあるのに対して、処理が明示されているのは3種類のみなので。
　4番目は、その前の成り行きで・・というのが意図的でしたら、正しく処理されていることになりますが…

4）処理全体として、個々のHTML要素にイベントを設定していますが、リアルタイムに処理しても、実際に使われるのはモーダルウィンドウ表示時ですので、値の反映は表示時（表示直前）にまとめて行えば充分ではないでしょうか？
一方で、leanModalはクリックで自動実行されてしまい、直前を拾えるイベント等が用意されていないようですので、次善の考えとして、formが変わったら（change時）まとめて処理するといった方法が考えられます。
5）Modalクリック時のイベントとしてonButtonClickが設定されていますが、イベントを複数設定した場合の実行順序は保証されていなかったと記憶していますので、ご提示のスクリプトで「onButtonClickの処理が表示前に必ず実行される」とは必ずしも期待できないような気がします。（記憶が曖昧なので、自信はありませんが・・・）

この回答へのお礼

fujillin様
ご丁寧に教えて頂きありがとうございます。
とても分かりやすい解説で自分では気付けなかったことろだったので勉強になりました。
もっと勉強します！
お世話になりました！感謝しております！！

お礼日時：2016/03/02 12:52

No.1 ベストアンサー 回答者： yambejp 回答日時： 2016/03/02 10:16

＞window.onload = function onLoad() {

jQueryのライブラリ使っているのだからonload処理はこの書式ではできない
そもそもやっていることもonload処理じゃないし
実際にはこんな感じ？

<style>
#lean_overlay{
position: fixed; z-index:100;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none;
}
.modal{
display: none;
background: none repeat scroll 0 0 #FFC0C0;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
display: none;
padding: 30px;
width: 780px;
}
</style>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.leanModal.min.js"></script>
<script>
function onRadioButtonChange() {
var r=$('[name=r]:checked').val();
var list={"1":"ラジオ1","2":"ラジオ2","3":"ラジオ3"};
var str=(typeof list[r]!=="undefined")?list[r]:"選択してください";
$('#output').text(str);
}
function onButtonClick() {
var s=$('[name=s]').val();
var list={"5":"セレクト5","6":"セレクト6","7":"セレクト7"};
var str=(typeof list[s]!=="undefined")?list[s]:"選択してください";
$('#output1').text(str);
}
function hoge(){
var r=$('[name=r]:checked').val();
var s=$('[name=s]').val();
var list={
"1":{"5":"text_1_5","6":"text_1_6","7":"text_1_7"}
,"2":{"5":"text_2_5","6":"text_2_6","7":"text_2_7"}
,"3":{"5":"text_3_5","7":"text_3_7"}
};
var str=(typeof list[r]!=="undefined" && typeof list[r][s]!=="undefined")?list[r][s]:"選択してください";
$('#output3').text(str);
}

$(function() {
$( 'a[rel*=leanModal]').leanModal({
top: 100,
overlay : 0.5,
});
$( 'a[rel*=leanModal]').click(function(){
onButtonClick();
onRadioButtonChange();
hoge();
});

});
</script>

<form name="form1">
<input type="radio" name="r" value="1" >1<br>
<input type="radio" name="r" value="2" >2<br>
<input type="radio" name="r" value="3" >3<br>
</select>
<select name="s" id="Select1">
<option value="">-</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</form>
<br>
<a rel="leanModal" href="#mymodal">Modal</a>
<div id="mymodal" class="modal">
<p id="output"></p>
<p id="output1"></p>
<p id="output3"></p>
</div>

この回答へのお礼

yambejp様
出来ました！！完成しました！！yambejp様のお陰です！
丁寧に何度も教えて頂き大変感激しております！！
正常に動いた時は涙が出ちゃいました！嬉しかったです。
これからもっと勉強してyambejp様のように回答者として戻って来れるよう努力します！
本当にお世話になりました。ありがとうございました！

お礼日時：2016/03/02 12:48