- ベストアンサー
java scriptでフォーム制御
G_Aminoの回答
２ヵ所ある tree_list[menu].style.display= ～ を tree_list.style.display= ～ に修正すれば、画像のクリックでフォームの表示／非表示を切り替えられるようになります。 tree_listは配列ではないので、[menu]のように引数を指定することはできません。 (テスト環境:WindowsXP SP2,InternetExplorer6.0 SP2)
関連するQ&A
- ツリーメニュータグに関して
ツリーメニューに関して質問です。 最初の表示は ・メニュー ・メニュー(2) で、それぞれをクリックすると、 ・メニュー ├１－１ ├１－２ └１－３ ・メニュー(2) ├２－１ ├２－２ └２－３ と表示させたくて、タグ配布サイト様からツリーメニュータグをお借りし作成しました。 するとツリーの表示は問題ないんですが、ツリーメニュー配置場所以下にページがスクロールしなくなってしまいました。 上から５０行目くらいに設置したツリーメニューより下にあと１０行ほど文章があるのに、ツリーメニューが画面最下部に表示される位置までスクロールしたら、その下にはスクロールできない状態です。 説明下手ですみません。 配布サイト様に直接質問させていただこうと思ったのですが、そのサイト様は個人からの質問メールには答えないとあったので、こちらで質問させていただきます。 以下使用タグです。 <script type="text/javascript"> <!-- function expand(id) { if (id.style.display == "none") { id.style.display = ""; } else { id.style.display = "none"; window.event.cancelBubble = true; } // --> </script> <span onclick="expand(sample);" style="cursor:hand;">・メニュー</span> <div id="sample" style="display:none"> ├１－１<br> ├１－２<br> └１－３</div> <span onclick="expand(sample2);" style="cursor:hand;">・メニュー(2)</span> <div id="sample2" style="display:none"> ├２－１<br> ├２－２<br> └２－３</div> 他にツリーメニューを表示させることのできるタグがあることは知っていますが、調べたサイトの中で上記がいちばん短いタグだったので、使用したいなと思いました。 もしどこかを直せば正常に表示されるのであれば、お教えいただければ幸いです。
- 締切済み
- JavaScript
- フォームのリアルタイム入力チェック
現在、下記ソース（他のサイト様を参考）に送信時に入力チェックを行い、 エラーがあれば、送信されないようものを使っております。 送信時に加え、入力時に入力項目のみをリアルタイムに入力判定を行いたいです、 入力時にリアルタイムに行うためには、どのようにすればいいのでしょうか。 エラーがあれば、下記のように隠しているメッセージなどが表示され、 問題がなければ、表示させないまたは、表示されているエラーメッセージを隠す。 で構いません。 よろしくお願い致します。 ・htmlファイル <div id="notice-form" style="display: none; color: red;"> 【必須項目に未入力があります】</div> <form name="mailform" method="post" action="index.php" onsubmit="return formCheck()"> <!--テキスト--> <div id="text1" style="display: none; color: red;"> 【text1入力して下さい】</div> <input type="text" name="text1" /><br /> <div id="text2" style="display: none; color: red;"> 【text2入力して下さい】</div> <input type="text" name="text2" /><br /> <div id="text3" style="display: none; color: red;"> 【text3入力して下さい】</div> <input type="text" name="text3" /><br /> ・JSファイル function formCheck(){ var flag = 0; if(document.mailform.text1.value==""){ flag = 1; document.getElementById('text1').style.display="block"; }else{ document.getElementById('text1').style.display="none"; } if(document.mailform.text2.value==""){ flag = 1; document.getElementById('text2').style.display="block"; }else{ document.getElementById('text2').style.display="none"; } if(document.mailform.text3.value==""){ flag = 1; document.getElementById('text3').style.display="block"; }else{ document.getElementById('text3').style.display="none"; } if(flag){ document.getElementById('notice-form').style.display="block"; return false; }else{ document.getElementById('notice-form').style.display="none"; return true; } }
- 締切済み
- JavaScript
- リンクメニュー収納を２つ以上つくりたいのですが
こんにちは。今、ホームページを作っています。javascriptで上手くいかない点があるので、質問させていただきます。回答よろしくお願い致します。 文字をクリックしたら下にメニューが表示されるようにしたく、<head>タグ内に <script type="text/javascript"> <!-- function expand(id) { if (id.style.display == "none") { id.style.display = "";} else {id.style.display = "none";} window.event.cancelBubble = true;} // --> </script> <body>タグ内に <span class="list" onclick="expand(a);" style="cursor:hand;">【項目１】</span><div id="a" style="display:none"> <a href="リンクしたいURL">内容１</a><br> <a href="リンクしたいURL">内容２</a><br> <a href="リンクしたいURL">内容３</a> </div> としています。これが１つだと問題なく表示されるのですが、この下に<span class="list" onclick="expand(a);" style="cursor:hand;">【項目２】</span><div id="a" style="display:none">…など２つ以上続けるとエラーが出てしまい上手く表示されません。 出来れば、 【項目１】 内容１ ←【項目１】をクリックすると表示 内容２ ← 内容３… ← 【項目２】 内容４… ←【項目２】をクリックすると表示 【項目３】 内容５… ←【項目３】をクリックすると表示 ・・・となるようにしたいのですが…。このような場合にはどうしたら良いのでしょうか。どなたかご回答よろしくお願いいたします。
- ベストアンサー
- Java
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>
- ベストアンサー
- JavaScript
- ツリーメニューの作成
ツリーメニューの表示ができません。 記述は以下のとおりです （ヘッダー内） メタタグで標準スクリプト指定 <meta http-equiv="Content-Script-Style" content="text/javascript"> ツリーメニューの記述(某サイトよりコピペ） <script language="JavaScript"> <!-- function ok(id){if(document.all(id).style.display == "none"){document.all(id).style.display="block";}else{document.all(id).style.display="none";}} //--> </SCRIPT> ボディ内 （実際にツリーメニューを表示させる箇所） <A HREF="JavaScript:ok('tree1');"> ■メニュー </A> <div id="tree1" style="display:none;"> ツリー１<br> ツリー２<br> ツリー３<br> </div> ///////////////////////////////////////////////////////////// こんな感じです。 以前別のＨＴＭＬファイルで、ツリーメニューをつくったときには 正常に表示（クリックすると、ずらずらと出てくる）のに、今回同じソース（というのですか？）で記述してみたら、ダメでした。 「このページは表示できません」とかなります。
- 締切済み
- その他（インターネット・Webサービス）
- firefox でjavascript が無効
下記のようにjavascriptで場面の切り替えを行ったのですが、firefox 3.6で見ると切り替え表示されません。他にlightbox やjquery-1.4.4.min.js などを使用していますが、取り除いて試したところやはり無効です。ＩＥでは正常に機能します。なにかよい方法はないでしょうか？ <script> function show1(){ content1.style.display="block"; content2.style.display="none"; } function show2(){ content1.style.display="none"; content2.style.display="block"; } </script> <style> #content1 { display:none; } #content2 { display:none; } </style> <ul class="u2" id="menu2"> <li><span onclick="show1();"><img src="images/menu1.jpg" alt="" border="0" /></span></li> <li><span onclick="show2();"><img src="images/menu2.jpg" alt="" border="0" /></span></li> </ul> <div id="content1"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <div id="content2"> bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
- ベストアンサー
- JavaScript
- JavaScriptについて
現在、ホームページにてJavascriptのツリーメニューをつくっています。 ここでメニューA・B・Cがあるとします。 メニューAが開いているときにメニューBを押したらメニューAを閉じるようにしたいのです、どうすればいいか分かりません。 現在の状態はこれです。 <SCRIPT language="JavaScript"> <!-- // ツリーメニュー flag = false; function treeMenu(tName) { tMenu = document.all[tName].style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </SCRIPT>
- 締切済み
- JavaScript
- javascriptでツリー表示
javascriptでツリー表示をしたいのですが、全くの素人で、一番やりやすそうなソースを見つけ、『“tree1”を変更して使用』と説明にはあったのですが、実際には『JavaScript:ok('tree1');"』とアドレスに表示されるだけで、目的のツリー表示をしてくれません。 どうしたら、良いでしょうか？ <SCRIPT language="JavaScript"> <!-- function ok(id){if(document.all(id).style.display == "none"){document.all(id).style.display="block";}else{document.all(id).style.display="none";}} //--> </SCRIPT> <B><A HREF="JavaScript:ok('tree1');">■メニュー</A></B><BR> <DIV ID="tree1" style="display:none;"> ┣ あああ<BR> ┣ いいい<BR> ┣ ううう<BR> ┣ えええ<BR> ┗ おおお<BR> </DIV>
- ベストアンサー
- JavaScript
- フォームの送信ボタンを画像にしたい
<div style="float:left; margin-left:5px; margin-top:4px;"> <form id="form1" name="form1" method="post" action="test"> <input type="hidden" name="sample" value="test"> <span onclick="submit()" id="sample2" style="cursor:pointer;"> <img src="img.jpg" alt="sample"></span> </form> </div> html内に上記のように記述し、 フォームの送信ボタンを作成いたしました。 IEでは問題なく動作したのですが、 ファイヤーフォックスでは動作しませんでした。 調べたところ、documentを省略せずに記述すると動作するとなっていたので、下記のように書き換えました。 <div style="float:left; margin-left:5px; margin-top:4px;"> <form id="form1" name="form1" method="post" action="test"> <input type="hidden" name="sample" value="test"> <span onclick="document.form1.submit()" id="sample2" style="cursor:pointer;"> <img src="img.jpg" alt="sample"></span> </form> </div> そうすると今度はIEでもファイヤーフォックスでも動作しなくなりました。 どこか記述が間違っているのかもわからず、悩んでいます。 解決策や修正箇所等教えていただきたく思います。 ちなみに、やりたいことは 「フォームの送信ボタンをテキストリンク、もしくは画像リンクのように見せたい」 ということだけです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- style="displey:none"ができない
まず、このソースを見てください。 <html><head><base target="migi"></head> <body style="margin-top:3px;margin-left:3px;margin-right:3px;"> <div onmousedown="fmenu1()" style="cursor:hand;">メニュー表示</div> <table id=menu1 style="displey:none" border=0> <tr><td>あいうえお <br>かきくけこ <br>さしすせそ </td></tr></table> <SCRIPT language="JavaScript"> function fmenu1(){ if( menu1.style.display == "none") menu1.style.display = "block"; else menu1.style.display = "none"; } </SCRIPT> </body></html> これを表示すると、最初から「あいうえお」「かきくけこ」「さしすせそ」が出ている状態になります。 style="displey:none" というのは間違っているでしょうか？ 回答お願いします。
- ベストアンサー
- HTML
お礼
すみません。こちらの勘違いでした。 無事問題解決出来ました。 本当にありがとうございました。
補足
おおー、できました。ご丁寧に教えていただきありがとうございましたｍ(__)ｍ。とても助かりました。 最初の質問で質問すればよかったので、これはよかったらで結構なんですが、画像をもう一度クリックしたら再び閉じるようにするような方法はありますでしょうか？