- ベストアンサー
※再質問です。 フォームを３つつくり、トップからの<img>リンクの時は指定フォームにリンクしたい。
※この質問は以前こちらで質問させて頂いた内容と同じですが、 どうしてもうまくいかなかったため、再度質問させて頂きました。 js初心者です。 サブpage（診察予約のリンク先のhtml）で各フォーム（お問い合わせ・予約・ゲストブックなどを）を一つのhtmlにまとめたく、iframeもしくはinnerHTMLを使い、サブメニューでdisplay="none"切り替えなどで、各フォームを切り替えたいと作成し始めたものです。 サーバーサイドのＣＧＩはKentさんのフリーＣＧＩのＣｌｉｐＭａｉｌやAjaxを使用する予定でおります。 ただ条件として、トップのコンテンツ内の「メール相談画像」ボタンからのリンク先はお問い合わせフォームで、通常の横メニューボタン（緑の）の診察予約ボタンからのリンク先は予約フォームがデフォルトとして表示されるようにしたいわけです 。 http://miya-fc-2008.sakura.ne.jp/（ご参考に拝見して頂きたいＵＲＬです。） 【フォームの外部jsファイル】 //トップからのリンク時の振り分け（予約フォームかお問合わせフォームかで） document.body.onload=function(){//読み込みが終われば判定開始 alert('function直後OK'); if(location.search=="?mail_s"){//ファイル名の後に「?mail」が付いていれば document.getElementById('mail_s').style.display="block"; document.getElementById('f1_title').style.background = 'url(images/sin_yoyaku/toiawase_form_title.gif)'; alert('if処理一回目OK');//「mail」フォームを表示 } else if(location.search=="?apo_s"){//「?appoint」ならば document.getElementById('apo_s').style.display="block"; document.getElementById('f1_title').style.background = 'url(images/sin_yoyaku/yoyaku_form_title.gif)'; alert('if処理二回目OK'); } else{//それ以外・指示なしのときは document.getElementById('apo_s').style.display="block"; document.getElementById('f1_title').style.background = 'url(images/sin_yoyaku/yoyaku_form_title.gif)'; } } ※js側でalertをおいて、デバッグをしぼってみたら、どうやらbody.onloadを読み込んでないようです。この箇所は以前の回答者 の方に教えて頂いた箇所で、自分でどう修正したらよいか分かりません。 アドバイス宜しくお願いします。
- WebRunva
- お礼率80% (34/42)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>>デバッグをしぼってみたら、どうやらbody.onloadを読み込んでないようです。 「document.body.onload=function(){...}」という記述は <body>タグの後に記述してください。 もしくはfunctionに名前を与えて <body>タグのonloadイベントハンドラに記述ください。 例） <script> function test(){...} </script> <body onload="test()"> No.1の方もおっしゃっていますが 「document.body.onload～」は広く認められた書き方ではありません。 普通は「window.onload～」とします。 「document.body.onload～」はIEでは動きますが、Firefoxといったブラウザでは動きません。
その他の回答 (1)
- auty
- ベストアンサー率58% (284/486)
>>> デバッグをしぼってみたら、どうやらbody.onloadを読み込んでないようです。 onloadは、 document.body.onload ではなく、 window.onload
お礼
auty様> 教えて頂き、本当にありがとうございました。 一発で解決できました。
関連するQ&A
- フォームを３つつくり、トップからの<img>リンクの時は指定フォームにリンクしたい。
JavaScript初心者です。 サブpage（診察予約のリンク先のhtml）で各フォーム（お問い合わせ・予約・ゲストブックなどを）を一つのhtmlにまとめたく、iframeもしくはinnerHTMLを使い、サブメニューでdisplay="none"切り替えなどで、各フォームを切り替えたいと作成し始めたものです。 サーバーサイドのＣＧＩはKentさんのフリーＣＧＩのＣｌｉｐＭａｉｌやAjaxを使用する予定でおります。 ただ条件として、トップのコンテンツ内の「メール相談画像」ボタンからのリンク先はお問い合わせフォームで、通常の横メニューボタン（緑の）の診察予約ボタンからのリンク先は予約フォームがデフォルトとして表示されるようにしたいわけです。 【ご参照お願いします。】 http://miya-fc-2008.sakura.ne.jp/ たぶんjavascriptで条件式を用いてリンク先を振り分ければいいと思ったので、質問投稿させて頂きましたが、具体的にどういう条件式などで 書いていけばいいか分かりません。 アドバイス頂けると幸いです。 宜しくお願いします。
- ベストアンサー
- JavaScript
- テーブル背景を毎日入れ替える方法
以前ここで同様の質問させていただいた者です。 回答いただいた例を参考にして、自分なりに設定を直してみたのですが動かない状態です… もう一度ご教授をお願いします。 テーブルの背景画像を日によって変更できるように、と思っています。 tableタグ内は、以下のようにしました。 <table id="BACKIMG" ～中略～ style="BORDER: #7B7B7B 1px solid; background-image:url('image/tableback.jpg');"> またJavaScriptは外部ファイルにして 【Change.js】の内容↓ function fncChange() { var a; var date = new Date(); var d = date.getDate(); a = d % 7; if (a==0){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images0/top.jpg)"; }else if (a=1){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images1/top.jpg)"; }else if (a=2){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images2/top.jpg)"; }else if (a=3){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images3/top.jpg)"; }else if (a=4){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images4/top.jpg)"; }else if (a=5){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images5/top.jpg)"; }else if (a=6){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images6/top.jpg)"; } } 使用する画像はフォルダで分けるつもりです。 HTMLにはHEADタグの間に <SCRIPT language="javascript" src="Change.js"> <!--// fncChange(); //--> </SCRIPT> を記述しています。 これで不足してる部分がありますでしょうか？ 解決策をよろしくお願いします。
- ベストアンサー
- JavaScript
- window.onloadのコマンドについて
下記のソースにあるリセットボタンをクリックした時に、 フォーム内のデータを消去すると共に、window.onloadコマンドを 実行させるようにしたいと考えています。 どのように制御すればよいのか、ご教授頂ければ幸いです。 よろしくお願い致します。 ソース： ---------------------------------------------------------- <script> <!--オンロードさせ、リロード時に選択を保持--> window.onload = loadform; function loadform (){ entryChange01(); entryChange02(); entryChange03(); entryChange04(); } <!--フォームの表示／非表示の制御1--> function entryChange01(){ radio = document.getElementsByName('radio01') if(radio[0].checked) { document.getElementById('table2').style.display = "none"; document.getElementById('table3').style.display = "none"; }else if(radio[1].checked) { document.getElementById('table2').style.display = ""; document.getElementById('table3').style.display = ""; } } <!--フォームの表示／非表示の制御2--> function entryChange02(){ radio = document.getElementsByName('radio02') if(radio[0].checked) { document.getElementById('table5').style.display = "none"; document.getElementById('table6').style.display = "none"; }else if(radio[1].checked) { document.getElementById('table5').style.display = ""; document.getElementById('table6').style.display = ""; } } } </script> <input type="reset" value="リセット" onclick="return confirm('本当に入力内容を削除してもよろしいですか？');" />
- 締切済み
- JavaScript
- FlashからJavascriptを動作させるには？
FlashからJavascriptを動作させるには？ よろしくお願い致します。 以下のようなJavascriptのコードがあります。 リンクをクリックすると隠れている領域（div）が表示されるというものなのですが、 このリンクをFlashにして動作させたいと思っています。 その場合、どのようなコードをFlashに記入すればよいのでしょうか？ ■Javascriptのコード（外部jsにしています） function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; } else { document.getElementById(targetID).style.display = "none"; } } } ■HTMLのコード <a href="#hoge" onclick="showHide('hoge');return false;">隠れている領域を表示</a> <div id="hoge" style="display:none;"> </div> 説明不足のようでしたら、補足説明致します。 どうぞご教授下さいますようお願い致します。
- ベストアンサー
- Flash
- javascript外部ファイル化の複数指定の質問です。
javascript外部ファイル化の複数指定の質問です。 一つ目 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} 二つ目 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ window.onload = function() { document.getElementById("home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; document.getElementById("sub_home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("sub_home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; } この上記の２つのjavascriptを別々に外部ファイル化して、head内に読み込んでおります。 両方とも動作させたいのですが、下のwindow.onload のjavascriptしか動作しません。 両方、動作させるには、どのように記述すればよいのでしょうか？ どなたか教えていただけませんか？ よろしくお願い致しますm(＿ ＿)m
- 締切済み
- JavaScript
- ブラウザ判別
テーブル行をスイッチによって表示非表示を切り替える機能を実装してるんですが IEではtable-rowを入れてもエラーを出し NNやFirefoxではblockを入れるとレイアウトが崩れてしまい IEの場合block、NNやFirefoxではtable-rowを判別していれるようにしたんですが 切り替えているとなぜかたまにblockが入ってしまうことがあります //ブラウザ判別 if (document.all) { var display = 'block'; } else if (document.getElementById) { var display = 'table-row' } if(switch_1 == "on"){ document.getElementById('row1').style.display = display; document.getElementById('row2').style.display = 'none'; document.getElementById('row3').style.display = display; } if(switch_1 == "off"){ document.getElementById('row1').style.display = 'none'; document.getElementById('row2').style.display = display; document.getElementById('row3').style.display = 'none'; } 何かおかしいのでしょうか もしくは代替方法があればご教示お願いします
- ベストアンサー
- JavaScript
- cssでdisplay:noneを指定した時のプルダウンメニュー
こんにちは、JavaScriptでプルダウンメニューを作ろうとして cssで予めdisplay:none;を指定したところ、 メニューがクリックしても開かなくなってしまいました。 html、css、JavaScriptの記述は以下の通りです。 html --------------------------------------- <span onclick="PullDown('term1')">クリック</span> <div id="term1"> <ul> <li>***********</li> <li>***********</li> </ul> </div> ----------------------------- css ------------------------------ div#term1 { display: none; } ------------------------------- JavaScript ------------------------------- function PullDown(id){ if(document.getElementById(id).style.display == 'none') document.getElementById(id).style.display=''; else document.getElementById(id).style.display='none'; } --------------------------------- cssの記述部分を無くすとちゃんと開いたり閉じたりと動作します。 また、 function Init(){ document.getElementById("term1").style.display="none"; } とJavaScriptで書いて、 bodyタグの所で <body onload="Init()">として呼び出してロード時に隠すようにするとちゃんと開閉してくれます。 cssでdisplay:none;と書くと動かなくなる理由と、 対策が分かる方居ましたら教えてください。
- ベストアンサー
- JavaScript
- style.displayだと効率悪いから...
style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
- style.displayだと効率悪いから…
style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。
- ベストアンサー
- JavaScript
- 展開メニューの修正
展開メニューの修正 をしています。 menu.js------------------------ function block(id){ if(document.getElementById){ if(document.getElementById(id).style.display == "none"){ document.getElementById(id).style.display = "block"; }else if(document.getElementById(id).style.display == "block"){ document.getElementById(id).style.display = "none"; } } } html--------------------------- <div onMouseOut="block('block1')"> <div onMouseOver="block('block1')"><a href="***">コンテンツ名</a></div> <div id="block1" style="display: none;"> <ul> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul></div></div> 「コンテンツ名」に触った時展開して、サブコンテンツor「コンテンツ名」から離れた時にサブコンテンツを閉じる、という挙動まではできているのですが、 サブコンテンツのメニュー間を移動する際にちらつくというかいちいち閉じてしまうのを直したいのですが、どうしたらいいのでしょうか？ よろしく御教授ください。
- ベストアンサー
- JavaScript
お礼
OKbokuzyo様> 詳しく教えて頂き本当にありがとうございました。 おかげ様で解決しましたし、意味まで把握できました。