締切済み

JavaScriptの入れ子

2009/08/15 21:34

久しぶりの、教えて gooです。宜しくお願いします。 HTMLとJavascriptで動くホームページを、メモ帳で記述しています。構造は、 1)HTML、BODY、FORM内のselectで、条件1と条件2を取得　Javascriptで、入力チェックすると同時に、　読み込むデータベース jsファイルですを動的に決めて、変数ａに格納します。　また、条件3を、変数ｂに格納します。 2)次に、外部に置いているjsファイルを、Javascriptで読み込みます。 3)そして、Javascriptで、条件3に一致するレコードでテーブルを生成して　innerhtmlで書き出します。部品1)単体、部品3)単体は、動作チェックが済んでいます。ですが、部品1)から、部品3)に、変数ａ、ｂを引き渡せていないようで検索条件は指定出来るのに、読み込み、書き出しが実行できません。どのように、記述を改めれば動作するのか、教えて下さい。宜しくお願いします。以下、ソースを抜粋します。 001 <HTML> 002 <HEAD> 003 <SCRIPT type="text/javascript"> 004 function Select(){ 005 var frm = document.forms["frm1"]; 006 007 var idx = frm.elements["select1"].selectedIndex; 008 var idy = frm.elements["select2"].selectedIndex; 009 var idz = frm.elements["select3"].selectedIndex; 010 011 　 if(idx!="" && idy!="" && idz!="") { 012 /* 読み込みDB */ 012 dbname1 = frm.elements["select1"].options[idx].value; 013 dbname2 = frm.elements["select2"].options[idy].value; 014 /* DB抽出条件 */ 015 　jouken1 = frm.elements["select3"].options[idz].value; 016 017 /* DB名称生成 */ 018 DBname = "./DB_" 019 DBname += dbname1 020 DBname += "_" 021 DBname += dbname2 022 DBname += ".js" 023 } 024 else{ 025 alert("未入力項目があります"); 026 } 027 } 028 </script> 029 030 031 <script type="text/javascript" src="DBname"></script> 032 033 034 <script type="text/javascript"> 035 var i; 036 var r; 037 var arrayLength=exDB.length; 038 039 function dataSearch(jouken1) { 040 var flag=false; 041 var msg; 042 var data=new Array(); 043 044 　　msg = "<TABLE BORDER='0'>"; 045 msg = msg+"<TR>" 046 msg = msg+"<TH width='60'>名前</TH> 047 msg = msg+"<TH width='120'>都道府県</TH> 048 msg = msg+"<TH width='120'>電話番号</TH>"; 049 msg = msg+"</TR>"; 050 051 for(i=0; i<arrayLength; i++) { 052 data=funeDB[i].split(" "); 053 if(data[0]==jouken1) { 054 flag = true; 055 msg = msg+"<TR>"; 056 msg = msg+"<TD class='light-right' width='60' >"+data[0]+"</TD>"; 057 msg = msg+"<TD class='light-right' width='120'>"+data[1]+"</TD>"; 058 msg = msg+"<TD class='light-center' width='120'>"+data[2]+"</TD>"; 059 msg = msg+"</TR>"; 060 } 061 if(flag==false) { 062 msg = msg+"<tr><td>該当する文字列はありません</td></tr>"; 063 } 064 msg = msg+"</TABLE>"; 065 document.getElementById("displayPane").innerHTML=msg; 066 } 067 </SCRIPT> 068 069 070 </HEAD> 071 072 <BODY> 073 074 <FORM name="form" action="#"> 075 <SELECT name="select1"> 076 <option value="">▼選択してください</option> 077 　　　　中略 078 </SELECT> 079 080 <SELECT name="select2"> 081 <option value="">▼選択してください</option> 082 　　　　中略 083 </SELECT> 084 085 <SELECT name="jouken1"> 086 <option value="">▼選択してください</option> 087 　　　　中略 088 </SELECT> 089 090 <INPUT type="button" value="検索する" onclick="Select()" /> 091 092 </FORM> 093 094 <DIV id="displayPane"></DIV> 095 096 </BODY> 097 098 </HTML>

yurinoki
お礼率37% (17/45)

JavaScript
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

みんなの回答

15mm
ベストアンサー率65% (65/100)

2009/08/17 13:36 回答No.2

「外部js 動的読み込み」あたりで検索すればすぐに出てきます。 var s=document.createElement('script');s.type="text/javascript";s.src=DBname; document.body.appendChild(s); のやり方が一般的、らしい。 document.body.appendChild(document.createElement('script')).src="test.js" でもIE8,FF,Opera確認。 document.writeだと何度も読み込み処理ができないかと思います。

k0021
ベストアンサー率26% (32/120)

2009/08/16 06:07 回答No.1

cssは必要により変更していますが。Javascriptではやった事無いですが。 <script type="text/javascript" src="DBname"></script>なく document.write("<script type="text/javascript" src="'+DBname+'"></script>"); ないですか。 Javascriptは、初心者ですが間違いていたらごめん

関連するQ&A

JavaScriptの読み込み順
下記コードを実行すると、プルダウンメニューに値が入る前にボタンがクリックされてしまいます。どのようなコードを書けば正常に動作するのでしょうか。 ■html内 <html> <head> <title>SCT</title> <script type="text/javascript"> onload = function() { var d = new Date() ; d.setTime((new Date).getTime()) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getFullYear()-1 ; document.getElementById('year').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getMonth()+1 ; document.getElementById('month').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getDate() ; document.getElementById('day').appendChild(newOption) ; } </script> <script type="text/javascript" language="JavaScript" src="./file.js"> </script> </head> <form NAME="Myfm" method="post" action="☆☆URL☆☆"> <body onLoad="yobi()"> <table border="0"> <tr> <td> <select name="startyear" id="year"> </select> </td> <td>年</td> <td> <select name="startmonth" id="month"> </select> </td> <td>月</td> <td> <select name="startday" id="day"> </select> </td> <td>日</td> </tr> <tr> <td> <select name="endyear"> <option value=201>2011 </select> </td> <td>年</td> <td> <select name="endmonth"> <option value=8>8 </select> </td> <td>月</td> <td> <select name="endday"> <option value=1>1 </select> </td> <td>日</td> </tr> <tr> <td><input type="submit" value="集計" NAME="mybut"> </td> </tr> </table> </body> </form> </html> ■file.js内 function yobi(){ document.Myfm.submit(); }
- ベストアンサー
- JavaScript
１ページで２つのフォームをチェックしたいのですが…
１つのページに同じ項目のフォームを２つ作りました。そしてそれにチェックを設けたいと思いフォームチェックのスクリプトを入れてみました。が、しかし、、上のフォームはチェックが動くのですが、下のフォームは何を入れてもチェックがエラー検出をして次のページに進めなくなってしまいます。。こちらはどのようにしたら両方のチェックが働きつつ次のページに値を渡せるのでしょうか？正しい書き方を教えてください。よろしくお願いします。 <html> <head> <script language="JavaScript">  </script> </head> <body> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>１か２</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">１</option> <option value="2">２</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>１か２</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">１</option> <option value="2">２</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> </body> </html>
- 締切済み
- HTML
JavaScriptでの表の行の表示・非表示の切り替え
現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript">  </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト１</option> <option value="test2">テスト２</option> <option value="test3">テスト３</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p> </p> </td> <td width="217"> <p> </p> </td> </tr> </table> <div id="test1" style="display:none;"> （本来はここに2行追加したい） </div> </body> </html>
- ベストアンサー
- JavaScript
JavaScriptのSELECTの値について
JavaScriptについて、質問させてください。 html1からhtml2にSELECTで選択した値を渡すプログラムを作成しています。下はそのソースです。 <html> <head></head> <body> <form method="POST" action="html2" onSubmit="入力チェック"> <table> <tr> <td>項目A-1</td> <td>項目A-2</td> <td> <select name="selname1"> <option value="0">0</option> <option value="1,11,111">1</option> <option value="2,22,222">2</option> </select> </td> </tr> <tr> <td>項目B-1</td> <td>項目B-2</td> <td> <select name="selname2"> <option value="0">0</option> <option value="3,33,333">3</option> <option value="4,44,444">4</option> </select> </td> </tr> </table> </form> </body> </html> 項目は全部で１０ほどあるので、途中省略しています。 SELECTで0以外が選ばれていた場合に、それに関連する項目情報と optionのvalueをhtml2に送信させて、一覧表のように表示させたいと思います。 JavaScriptのDOMやループ文を使うようですが、私は専門外なので、どのような処理を組めばよいかわかりません。どなたか、わかる方ご教示願います。
- 締切済み
- JavaScript
javascriptでselectボックスの<OPTION>要素数の取
javascriptでselectボックスの<OPTION>要素数の取得する方法について疑問があります。データが1件の場合、複数件の場合とで分けて、 <OPTION>要素数を取得する処理を記述していますが、データが1件の場合、 document.getElementsByName("sel").length で正しい値が取得できません。詳しくは下記のソースを参照していただきたいのですが、 (1)、(2)、(4)は、正しい値'5'ですが、 (3)だけ誤った値'1'になります。これはなぜでしょうか？ javascript初心者のため、初歩的な質問かもしれませんが、教えていただけたら嬉しいです。よろしくお願い致します。 -------------------------------------- <HTML> <HEAD> <SCRIPT language="JavaScript"> 　　function getSelLen(){ var oForm = document.form1; var sObj; var sObj2; //チェックボックスの数でデータが複数件か1件か判別しています。 if(oForm.chk.length){ //データが複数件の場合 for ( var i = 0; i < oForm.chk.length; i++ ) { sObj=document.getElementsByName("sel")[i]; alert("(1)　"+ sObj.length); //・・・・(1)　正 sObj2=oForm.elements["sel"][i]; alert("(2)　"+ sObj2.length); //・・・・(2)　正 } }else{ //データが1件の場合 sObj=document.getElementsByName("sel"); alert("(3)　"+ sObj.length); //・・・・(3)　誤 sObj2=oForm.elements["sel"]; alert("(4)　"+ sObj2.length); //・・・・(4)　正 } } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <TABLE> <TR> <TD> <INPUT type="checkbox" name="chk" > </TD> <TD> <SELECT name="sel" > <OPTION value="" selected> <OPTION value="00">00 <OPTION value="01">01 <OPTION value="02">02 <OPTION value="03">03 </TD> </TR>   </TABLE> </FORM> <FORM name="form2"> <INPUT type="button" onClick="getSelLen()" value=" selectの要素数 "> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
jacascriptとフォームselectメニューで計算した値を保存したい
お世話になります。 javascriptを使った計算を勤め先で必要ということで、社内で少しパソコンに詳しいという理由で自分が手がけることになりましたorz 色々と検索しながら勉強し、ようやく思い通りのプログラムを見つけて参考にしながら実践してみたのですが、思い通りにならない箇所が一部ありまして困っています。参考にしたのは以下のサイトなのですが、 ttp://www.tagindex.com/javascript/form/comp1b.html セレクトメニューから選んだ値を特定の数値で掛けそれを合計するという流れなのですが、このスクリプトだと、一度計算を終えると、もう一度セレクトメニューから値を選択しないと値が０になってしまっているのです。希望としては、この選択した値を保存しておき、計算が終わってもそれ以前の選択状況のままにしておきたいんですが、どうやればできるでしょうか？ <script type="text/javascript">  </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル2</td> <td align="right">1,000円</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field2" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル3</td> <td align="right">3,000円</td> <td><select name="goods3" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field3" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form>
- ベストアンサー
- JavaScript
このhtmlの書き方は正しいでしょうか。
下記の情報の配置の仕方は正しいでしょうか？実際に使用するときは<tbody>～</tbody>を複数増やします。サンプルでは２つですが、これが400以上になります。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" /> <title></title> <style type="text/css"> body { background-color: #f5e088; margin: 0; padding: 0; font-size: 15px; } #base { width: 600px; margin: 0 auto; background-color: #fff; } table#ttt { width: 600px; background-color: #ccc; border: 2px solid #000; padding: 15px 0px; } table#ttt th, table#ttt td { width: 100px; } td#kkk { text-align:center; } table#ccc th { color: #f00; width: 60px; } table#ccc td { } .shashin, td.shousai { width: 150px; background-color: #ff0; } </style> </head> <body> <div id="base"> <form action="#"> <table id="ttt"> <tr> <th>市</th> <td> <select name=""> <option value="">指定していません</option> <option value="横浜市">横浜市</option> <option value="鶴見区">鶴見区</option> <option value="神奈川区">神奈川区</option> <option value="西区">西区</option> </select> </td> <th>町村</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> </tr> <tr> <th>小学校区</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> <th>中学校区</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> </tr> <tr> <th>データ</th> <td> <select name=""> <option value="">指定していません</option> <option value="500">500値未満</option> <option value="1000">500値以上1000値未満</option> <option value="1500">1000値以上1500値未満</option> </select> </td> <th>レベル</th> <td> <select name=""> <option value="">指定していません</option>　 <option value="30">30Lv未満</option> <option value="60">30Lv以上60Lv未満</option> <option value="90">60Lv以上90Lv未満</option> <option value="100">90Lv以上100Lv以下</option> </select> </td> </tr> <tr> <td colspan="4" id="kkk"> <input type="button" id="" value="検索" onclick=""> </td> </tr> </table> </form> 方法その１ <table id="ccc"> <tbody> <tr> <td rowspan="3" class="shashin"><img src="" alt="画像"></td> <th>場所</th><td colspan="7">神奈川県横浜市金沢区</td> <td rowspan="2" colspan="2" class="shousai"><img src="" alt="詳細はこちら"></td> </tr> <tr> <th>データ</th><td colspan="3">525値</td> <th>レベル</th><td colspan="3">53Lv</td> </tr> <tr> <th>小学校区</th><td colspan="4">市立第一横浜小学校</td> <th>中学校区</th><td colspan="4">市立第一横浜中学校</td> </tr> </tbody> <tbody> <tr> <td rowspan="3" class="shashin"><img src="" alt="画像"></td> <th>場所</th><td colspan="7">神奈川県横浜市金沢区</td> <td rowspan="2" colspan="2" class="shousai"><img src="" alt="詳細はこちら"></td> </tr> <tr> <th>データ</th><td colspan="3">525値</td> <th>レベル</th><td colspan="3">53Lv</td> </tr> <tr> <th>小学校区</th><td colspan="4">市立第一横浜小学校</td> <th>中学校区</th><td colspan="4">市立第一横浜中学校</td> </tr> </tbody> </table> </div> </body> </html> このような内容を作る時はテーブルが一番正しいのでしょうか？最も正しい方法を教えて頂きたいです。
- ベストアンサー
- HTML
セレクトボックスを使ったJavaScriptでの計算方法
セレクトボックスから名前を選択して計算する方法を教えてください。 HTMLとJavaScriptは別に分けます。 ----------.html---------- <table border="1"> <tr><td>武器</td> <td><form name="myForm"> <select name="Item" size="1" tabindex="0"> <option value="0">あああああ</option> <option value="1">いいいいい</option> <option value="2">ううううう</option> 　　　　　・　　　　　・　　　　　・　　　　　・　　　　　・ </select> </td></tr> <tr><td>OP1</td> <td> <select name="OP1" size="1" tabindex="0"> <option value="0">AAAAA</option> <option value="1">BBBBB</option> <option value="2">CCCCC</option> 　　　　　・　　　　　・　　　　　・　　　　　・　　　　　・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> 　　　　　・　　　　　・　　　　　・　　　　　・　　　　　・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> 　　　　　・　　　　　・　　　　　・　　　　　・　　　　　・ </select> </td></tr> <tr><td colspan="2" align="center"> <input type="button" value="計算する" onclick="Calculation()"> <input type="reset" name="リセット" value="リセット"> </form> </td></tr> <tr><td colspan="2" align="center"> <form name="TxtArea"><input type="text" name="myResult" size="20"> </form> </td></tr> </table> .jsではItemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としています。 box1[0]=10; box1[1]=15; といった感じです。全部足し算で計算します。どのようにすれば計算できるのかJavaScriptについて書かれてるページを見たのですが理解できなかったのでよろしくお願いします。
- ベストアンサー
- JavaScript
ラジオボタンの初期値について
いつも大変お世話になってます。ラジオボタンで、ページが読み込まれたら、値によって、選択されている状態にしようと思っているのですが、うまくいきません。以下、ソース部分です。 ★javascript部分 addOnload(function() { var tantou9 = "<%=szei_hasu_kbn%>" var element9 = document.getElementById("hasu"); for (var i=0; i<element9.options.length;i++) { if(element9.options[i].value === tantou9){ element9.options[i].checked = true; break; }; }; }); addOnload(function() { var tantou10 = "<%=szei_zei_kbn%>" var element10 = document.getElementById("zei"); for (var i=0; i<element10.length;i++) { if(element10.item[i].value === tantou10){ element10.item[i].checked = true; break; }; }; }); 上は、プルダウンの時の処理を真似てるので、違うんだろうなとは思います。例えば、element10[1].checked = true;　だけを実行してもダメでした。 addOnload(function()部分は、他の処理はできるので、ここは間違ってないと思います。ちなみにサーバーサイドはASPで、<%=szei_zei_kbn%>に値が問題なく入ってることは、確認できてます。 ★HTML部分です。 <tr> <th> <b>端数</b> </th> <td> <input id="hasu" type="radio" name="zei_hasu" style="width:100%" rows=1 value="0">四捨五入 </td> <td> <input id="hasu" type="radio" name="zei_hasu" style="width:100%" rows=1 value="1">切捨 </td> <td> <input id="hasu" type="radio" name="zei_hasu" style="width:100%" rows=1 value="2">切上 </td> </tr> <tr> <th> <b>税</b> </th> <td> <input id="zei" type="radio" name="zei_zei" style="width:100%" rows=1 value=0>外税 </td> <td> <input id="zei" type="radio" name="zei_zei" style="width:100%" rows=1 value=1>内税 </td> <td> <input id="zei" type="radio" name="zei_zei" style="width:100%" rows=1 value=2>非課税 </td> </tr> どなたかご存知の方がいらっしゃいましたら、ご教授お願いします。宜しくお願いします。
- ベストアンサー
- JavaScript
firefox3.6でJavaScriptが動かない
firefox2.xのころからだと思うのですが、 JavaScriptのOnChangeイベントが反応しません。環境は、少し古いのですが、ホームページビルダ１０です。ホームページ上へコンボボックスを配置して０～４の値を選択するようにしています。ソースは以下のようになっています。＝＝＝＝＝＝＝ <script language="JavaScript">  </script> <td valign="middle" height="28" width="13"><select size="1" style="font-size : 24px;" name="pent0" onchange="Pent(form,pent0)"> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select></td> ＝＝＝＝＝＝＝このソースでIE6では問題なく選択できるのですが、 firefoxだとonchangeに反応していないようです。対処方法をお教えください。
- ベストアンサー
- JavaScript

JavaScriptの入れ子

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

JavaScriptの入れ子

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録