• ベストアンサー

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> この場合ボタンが二つ表示されるのですが、ここをボタンひとつでこの二つの処理を同時に実行させたいのです。 お力お貸しください。

質問者が選んだベストアンサー

  • ベストアンサー
noname#30818
noname#30818
回答No.2

取りあえず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>

pekingenjin
質問者

お礼

こんなに変わってしまうんですか？ ありがとうございます。参考にさせていただきます。 フレーム1がちょっと変わるだけだと思ってましたｗｗ フレームとフレーム2部分まで変わってしまったんですね♪ ありがとうございました★

その他の回答 (2)

回答No.3

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の方法が全てではありません。 ご参考まで。

pekingenjin
質問者

お礼

＞少なくとも<frame>と<form>の違いくらいは覚えておいて損はないでしょう。 間違えてましたねｗｗ <input type="button" value="ボタン1"　onclick="window.parent.frame2.document.getElementById('txt1').value='おはようございます。';window.parent.frame2.document.getElementById('txt2').value='おやすみなさい。';"> こういうのを期待してました♪ 動かないですけど。。

noname#30818
noname#30818
回答No.1

フレーム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='おやすみなさい。' } となります。

pekingenjin
質問者

補足

初心者すぎてわからないので、いま作成してる現状を全部書きます。 ----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. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • if構文

    初心者でif構文がよくわからず質問させてください。 下記のようなボタンをつくり、 <form action="#"> <input type="button" value="うさぎ" id="txt" onclick="aGetElementById()" /> <input type="button" value="とり" id="txt" onclick=b"GetElementById()" /> </form> ボタンをクリックして、 <div><span id="box"></span>が大好きです。</div> のspanの中にvalue名（うさぎ・とり）を表示させ、『「value名」が大好きです。』と表示させたいのです。 Javascriptを下記のように書いてみたのですが、テキスト表示の切り替えがうまくいきません。 <script> <!-- function aGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } function bGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } --> </script> どうかおしえてください。 よろしくお願いします。

  • できる人がいたらお願いします。

    大切なところだけ下記に書き込みました。 今の所ここまでできていて後少しと言う所だと思うのですが。下記の※の部分が邪魔をしてどうしてもframe1.htmlのボタンが無効化してしまいます。 frame2.htmlの※の所を抜かせばいいじゃないかと思うのですが、frame2.htmlは加工できません。 なので、javaでもperlでもなんでもいいので。 frame2.htmlだけ変えないでtextareaに文章を入れたいです。 ヨロシクお願いします。 --------index.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------- <HTML> <body> <form> <input type="button" value="送信" onclick="window.parent.frame2.document.getElementById('txt').value='文章１';window.parent.frame2.document.getElementById('txt1').value='文章２';"> </form> </body> </html> --------frame2.html------- <html> <body> <input name='txt' type='hidden' value=''>　※ <input name='txt1' type='hidden' value=''>　※ <center> 文章<BR> <textarea rows=2 cols=38 name=txt></textarea><BR> 文章<BR> <textarea rows=2 cols=38 name=txt1></textarea><BR> </center> <body> <html>

  • 親フレームの変数にアクセス(JavaScript）

    [index.html] <script src="script.js"></script> <frameset rows="50%,*" frameborder="1"> <frame src="content1.html"name="cont1"> <frame src="content2.html" name="cont2"> </frameset> [script.js] var test_text="てすと"; [content1.html] <form> <input type="text" name="in"> <input type="button" onClick="window.parent.test_text = document.forms[0].in.value;" value="IN"> </form> [content2.html] <form> <input type="text" name="out"> <input type="button" onClick="document.forms[0].out.value =　window.parent.test_text;"　value="OUT"> </form> のようになっています。 「index.html」の「script.js」の変数に、「content.1html」と「content2.html」からアクセスしたいです。 ですが、フレームになっているため、思うような動作をしてくれません。 よろしくお願いします。

  • Javascriptを短くしたい

    初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>

  • javascriptのonclickに関数を追加？

    現在、javascriptでinput要素に新しくonclick='hoge()'などの関数を追加したいのですができません。 色々調べたのですが、結局わからなかったので質問させていただきます。 何卒、ご教授宜しくお願いします。 ■やろうとしていること 下記ソースのボタンをどれかクリックしたら、 新しく、<input type="button" value="次へ" onclick="next()" />というのを<span>に 生成したいのですが、onclickが追加されずに困っております。 どのようにしたらよいのでしょうか？ちなみにtypeとvalueは生成されています。 <form name="test"> <input type="button" value="" id="answer_0" onclick="test(0)" /> <input type="button" value="" id="answer_1" onclick="test(1)" /> <input type="button" value="" id="answer_2" onclick="test(2)" /> </form> <span id="test2"></span> <script> function test(n) { ・・・ 中略 var nq = document.createElement('input'); nq.type = "button"; nq.value = '次へ'; nq.onclick = "nexｔ()"; document.getElementById('test2').appendChild(nq); } </script> 以上、宜しくお願い申し上げます。

  • javascriptのtextbox

    こんばんは。 <html> <body> <center> <br><br> <form name="fuji"> TEXT BOX<br> <input type="text" name="tex"> </form> <SCRIPT type="text/javascript"> var i; i="ABC" document.write("<input type='button' value='↑を変数iに代入' onClick='i=(document.fuji.tex);'>"); document.write("<br><input type='button' value='表示' onClick='document.write(i);'>"); </SCRIPT> </center> </body> </html> でテキストボックスの中身を表示させたいのですが、 上手くいきません。どうすればいいのでしょうか。 また、変数を使わずに直接テキストボックスの中身を 表示させる事はできるのでしょうか。 教えてください。

  • javascript submit()の後の動作

    scriptはjsファイルで分離しています。 送信ボタンをクリックした場合の動作は期待通りの動作をしています エンターキーを押したときの動作が、フォームの送信は正常に実行されるのですが、 document.getElementById('ctxt').value= '';が実行されません。 その後、試しにアラートも入れてみましたけど、動作していないようです document.forms[txt_submit].submit();の後の部分が実行されるようにするにはどうしたらいいのでしょうか？ function Key_on(){ if(window.event.keyCode == 13){ document.forms[txt_submit].submit(); document.getElementById('ctxt').value= ''; alert('ん？'); } } function send(){ document.txt_submit.submit(); document.getElementById('ctxt').value= ''; } ----------------- <form id="txt_submit" name="txt_submit" action="log.cgi" method="post" target="log" autocomplete="off"> <input type="text" id="ctxt" name="ctxt" size="20" value="" onkeydown="Key_on()"> <input type="button" value="送信" onclick="return send();"> </form>

  • window.openで開いた子ウィンドウから親ウィンドウのjavascriptを実行するには

    window.openで開いた子ウィンドウから親ウィンドウのjavascriptを実行するにはどうしたらよいのでしょうか。 子ウィンドウから <INPUT TYPE="button" value=\"実行\" onClick=opener.document.jikkou();> や <INPUT TYPE="button" value=\"実行\" onClick=opener.jikkou();> 等のボタンを作ってみましたが、無反応でした。 すいません。宜しくお願いします。

  • JavaScriptで電卓を作って一応完成はした

    のですが、分からないコードがあります。以下のコードです。 ～HTML～ <form name="dentaku"> <input type="text" name="line" value="0"> <input type="button" value="Ｃ" onclick="cl()"> <input type="button" value=" ７ " onclick="val(7)"> <input type="button" value=" ８ " onclick="val(8)"> <input type="button" value=" ９ " onclick="val(9)"> <input type="button" value="÷" onclick="keisan('/')"> <input type="button" value=" ４ " onclick="val(4)"> <input type="button" value=" ５ " onclick="val(5)"> <input type="button" value=" ６ " onclick="val(6)"> <input type="button" value="×" onclick="keisan('*')"> <input type="button" value=" １ " onclick="val(1)"> <input type="button" value=" ２ " onclick="val(2)"> <input type="button" value=" ３ " onclick="val(3)"> <input type="button" value="－" onclick="keisan('-')"> <input type="button" value=" ０ " onclick="val(0)"> <input type="button" value=" ・ " onclick="val('.')"> <input type="button" value=" ＋ " onclick="keisan('+')"> <input type="button" value="＝" onclick="keisan('=')"> </form> ～JavaScript～ total = 0; input = ""; ope = "+"; flg = 1; function val(data) { flg = 0; input += data; document.dentaku.line.value = input; } function keisan(data) { if (flg == 0) { flg = 1; cf = total + ope + input; total = eval(cf); input = ""; document.dentaku.line.value = total; } if (data == "=") { total = 0; ope = "+"; } else { ope = data; } } function cl() { total = 0; ope = "+"; input = ""; document.dentaku.line.value = total; } 関係のないコードは省略してあります。また、CSSも省略しますが、テーブル要素を使わず以下の画像のようにインライン要素(input要素)の性質を利用して回り込みをさせています。 長くなりましたが、そこで質問なのですが、 (1)変数ope(operandの略)なのですが、初期値は+なのに演算子ボタン(上記のHTMLコード)をクリックすると、なぜ値がその演算子に変わるのか理由を教えて下さい。 何となく理由は分かりますが、はっきりと理解したいです。 (2)上記のHTMLコードをもっと簡単に書けませんか？ 特にonclickをボタンの数だけ書くのは手間です。

  • JavaScript text内にある文字のコピーの仕方について

    お世話になります。 現在作成中の テキスト内の文のバックスペースと テキスト内をクリアーは 下記の文となりプログラム上問題は御座いません。 <FORM name="a1"> <INPUT type="button" value="クリアー" onclick="document.a1.reset()"> <INPUT type="button" value="バックスペース" onclick="document.a1.a2.value=document.a1.a2.value.substring(0,document.b.c.value.length-1)"> <INPUT size="100" type="text" name="a2"></FORM> 出来ないのがボタンを押すとテキスト内の文字を コピーするという記述なのですが もし解られましたら お手数ですがお教え頂ければ幸いです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する