- ベストアンサー
JavaScriptでとても簡単なことだと思うのですが…
どういう風に検索かければ言いかわかりませんでした。 フレーム1と2に分けて、フレーム1でボタンを押すとフレーム2のテキストボックスの中に文字を入力する。という物を作っています。 下記はフレーム1の内容の一部です。本当に簡単な質問だとおもいます。 <frame> <input type="button" value="ボタン1"onclick="window.parent.frame2.document.getElementById('txt1').value='おはようございます。'"> </frame> <frame> <input type="button" value="ボタン2"onclick="window.parent.frame2.document.getElementById('txt2').value='おやすみなさい。'"> </frame> この場合ボタンが二つ表示されるのですが、ここをボタンひとつでこの二つの処理を同時に実行させたいのです。 お力お貸しください。
- pekingenjin
- お礼率64% (67/104)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
取りあえずIE6ではこんなイメージですかね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <head> <title>frames1.0</title> <script type="text/javascript"> <!-- window.onload=function(){ frames[0].document.forms[0].elements[0].onclick = function(){ frames[1].document.forms[0].elements[0].value = 'おはようございます。' frames[1].document.forms[0].elements[1].value = 'おやすみなさい。' } } //--> </script> </head> <frameset cols="50%,50%"> <frame src="frame1.html" name="frame1"> <frame src="frame2.html" name="frame2"> </frameset> </html> ----frame1.html---- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <title>frames1.0</title> </head> <body> <form action="javascript:void(0);" method="GET"> <input type="button" value="ボタン1"> </form> </body> </html> ----frame2.html---- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <title>frames1.0</title> </head> <body bgcolor='DarkGray'> <input name='Content' type='hidden' value=''> <form action="javascript:void(0);" method="GET"> <input type="text" name="txt1"> <textarea rows="5" cols="38" name="Content"></textarea> </form> </body> </html>
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
ANo.2の補足として。 HTMLが正確に書けていないと、JavaScriptが正確に書けていても動きません。 frame1.html、frame2.htmlの内容が変わるのは、 HTMLとして成り立っていないのを修正しているからです。 JavaScript以前の問題ですから、 JavaScriptをやるまえに、HTMLを勉強し直すのがいいと思います。 少なくとも<frame>と<form>の違いくらいは覚えておいて損はないでしょう。 見やすさ云々は抜きにして、 質問のところで書かれているものを元に作ると、以下の様にすることも出来ます。 <input type="button" value="ボタン1" onclick="window.parent.frame2.document.getElementById('txt1').value='おはようございます。';window.parent.frame2.document.getElementById('txt2').value='おやすみなさい。';"> もう少しHTMLやJavaScriptを勉強すれば、 これをどうすれば見やすくなるか、というのは自ずとわかる様になると思います。 ANo.2の方法が全てではありません。 ご参考まで。
お礼
＞少なくとも<frame>と<form>の違いくらいは覚えておいて損はないでしょう。 間違えてましたねｗｗ <input type="button" value="ボタン1" onclick="window.parent.frame2.document.getElementById('txt1').value='おはようございます。';window.parent.frame2.document.getElementById('txt2').value='おやすみなさい。';"> こういうのを期待してました♪ 動かないですけど。。
フレーム1をdocument.frames[0] フレーム2をdocument.frames[1] としてinputがformに入っているとフレーム1のボタンは document.frames[0].forms[0].elements[0] となります。 また、フレーム2のテキストボックスもformに入っているとすると document.frames[1].forms[0].elements[0] となりvalueは document.frames[1].forms[0].elements[0].value となります。 ここでボタンを押したときの関数を function aa(){} とするとフレーム1のボタンのonclickは document.frames[0].forms[0].elements[0].onclick=aa となります。 こうするとフレーム1のボタンを押した時の処理をaaの中に書けば良いことになります。 aaの中に document.frames[1].forms[0].elements[0].value='おはようございます。' と書くとdocument.frames[1].forms[0].elements[0]はフレーム2のテキストボックスなのでそのvalueが'おはようございます。'になるのですね。 これだと'おはようございます。'しか表示できないのですが、どうしましょうか。 １つのボタンで二つの処理をすると言うことはなんらかの条件が必要だと感じるのですが、質問文からその条件が読み取れないのです。 例えば条件をjyoukenとすると if(jyouken){//jyoukenを満たしているとき document.frames[1].forms[0].elements[0].value='おはようございます。' }else{//それ以外 document.frames[1].forms[0].elements[0].value='おやすみなさい。' } となります。
補足
初心者すぎてわからないので、いま作成してる現状を全部書きます。 ----frame.html---- <!DOCUMENT HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <title>frames1.0</title> </head> <frameset cols="50%,50%"> <frame src="frame1.html" name="frame1"> <frame src="frame2.html" name="frame2"> </frameset> </html> ----frame1.html---- <!DOCUMENT HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>frames1.0</title> </head> <body> <frame> <input type="button" value="ボタン1"onclick="window.parent.frame2.document.getElementById('txt1').value='おはようございます。'"> </frame> <frame> <input type="button" value="ボタン2" onclick="window.parent.frame2.document.getElementById('txt2').value='おやすみなさい。'"> </frame> </body> </html> ----frame2.html---- <!DOCUMENT HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <title>frames1.0</title> </head> <body bgcolor='DarkGray'> <input name='Content' type='hidden' value=''> <frame> <input type="text" Id="txt1"> </frame> <frame> <textarea rows=5 cols=38 name=Content id="txt2"></textarea> </frame> </body> </html> これがこれまで作っているすべてです。 掲示板みたいなものを作っています。 これでちゃんとボタンで文字がフレーム2に表示されるんですけど、ボタンを二つ押さないと両方に書き込みできません。 なので、ボタンひとつで両方に書き込みしたいのです。 お願いします。
お礼
こんなに変わってしまうんですか？ ありがとうございます。参考にさせていただきます。 フレーム1がちょっと変わるだけだと思ってましたｗｗ フレームとフレーム2部分まで変わってしまったんですね♪ ありがとうございました★