- 締切済み
新しいウィンドーでJavascriptを実行。
サンプルJavascriptを使わせてもらっているうちに非常に分厚い壁にぶつかっています。よろしくお願いいたします。 index.htmlは <form id="fm"> <input type="text" id="txtWord" size="30" /> <input type="submit" value="検索する" /> </form> <div id="state"></div> <div id="result"></div> とformを使っています。 index.jsで function init() { $('fm').onsubmit = function (){return ( itemDisp() );} $('fm').onreset = function (){clearDisp();} state = $('state'); result = $('result'); } とitemDisp()を実行しているんですよね? itemDisp()はitem.jsに記述されていて function itemDisp() { 省略 //結果を表示 result.innerHTML = tmpHtml; state.innerHTML = "データを取得しました。<br />\n"; 省略 ｝ とindex.htmlにデータの結果を表示しています。 今回したいことは、index.htmlで検索すると、その結果を別のウィンドーに表示したいのですが、何をキーワードにして勉強すればいいのかわかりません。 教えていただけないでしょうか。
- mutsukiame
- お礼率70% (35/50)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
こんな感じ？ （ライブラリを使用してないので、オブジェクトの取得がそのままの記述だけど…） <html> <script type="text/javascript"> var win; window.onload = function(){ win = window.open('','_blank','width=250,height=150'); win.document.open(); win.document.write('<html><body>別ウィンドウのつもり<p /><div id="fuga2"></div></body></html>'); win.document.close(); } function hoge(){ win.document.getElementById('fuga2').innerHTML = document.getElementById('fuga').value; } </script> <body> <input type="text" id="fuga" /> <input type="button" value="別ウインドウへ送る" onclick="hoge()" /> </body> </html>
関連するQ&A
- Ajax データが取得できない
現在、AJAXを勉強中です。以下のhtmlを実行し、pref.jsを呼び出すコードをサイトから引用して記述しました。 しかし、「データを取得する」ボタンを押すと、【処理中です・・・】というメッセージが出るだけで、いっこうに該当データを取得できません。(本来であれば、指定されたxmlファイル内のデータが表示されるはずなのですが・・） 何が原因なのでしょうか。 解決策がわかる方がいらっしゃいましたらご教授ください。 よろしくお願いします。 ■pref.html --------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="pref.js"></script> <link href="pref.css" rel="stylesheet" type="text/css"> <title>pref</title> </head> <body> <div> <input type="button" id="btnData" value="データ取得" /> <input type="button" id="btnClear" value="クリア" /> </div> <div id="state"></div> <div id="result"></div> </body> </html> --------- ■pref.js ---- onload = init; var state; var result; function init() { $("btnData").onclick = prefDisp; $("btnClear").onclick = clearDisp; state = $('state'); result = $('result'); } function prefDisp() { state.innerHTML = "処理中です・・・<br />\n"; var url = "http://ws.bzen.net/pgtop/pref.xml"; var paramList = ""; new Ajax.Request(url, { method: 'get', onSuccess: getData, onFailure: showErrMsg, parameters: paramList }); function getData(data){ var response = data.responseXML.getElementsByTagName('Response'); var item = response[0].getElementsByTagName('Item'); var tmpHtml=""; for(i = 0; i < item.length; i++){ var prefCd = item[i].getElementsByTagName('PREF_CD'); var prefCdValue = prefCd[0].firstChild.nodeValue; var prefName = item[i].getElementsByTagName('PREF_NAME'); var prefNameValue = prefName[0].firstChild.nodeValue; tmpHtml += prefCdValue + " " + prefNameValue + "<br />\n"; } result.innerHTML = tmpHtml; state.innerHTML = "データを取得しました。<br />\n"; } function showErrMsg(){ clearDisp(); state.innerHTML = "データを取得できませんでした。<br />\n"; } } function clearDisp() { state.innerHTML = ""; result.innerHTML = ""; } ---
- ベストアンサー
- AJAX
- なぜfunc()で動き、funcで動かないのか。
以前良く似た質問をしましたが、また疑問点が出たので質問します。 前回は、以下のコードでなぜonload = funcで動作し、onload = func()では動作しないのかをお聞きしました。 var img = new Image(); window.onload = function() { img.onload = func; } function func() { （省略） } その結果、funcだと関数を指定し、func()だと関数の返り値を代入するという答えを頂きました。 しかし自分で実験してみたところ、以下のコードでは逆の結果になりました。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { document.getElementById("result1").innerHTML = "result1"; } function result2() { document.getElementById("result2").innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> onload = result2()の方は期待通りの結果が得られましたが、onload = result1ではdiv要素に文字列は挿入されませんでした。onloadによって実行される関数をfunc形式で指定したのになぜ動作せず、func()形式のもののみ動作したのでしょうか？ あと蛇足になりますが、このようなコードも試してみましたが、どちらもうまくいきませんでした。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { this.innerHTML = "result1"; } function result2() { this.innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> 両方のfunction内のthisはdocument.getElementById("result1")またはdocument.getElementById("result2")を指すのではないのでしょうか？
- ベストアンサー
- JavaScript
- input type="file"のvalue監視
input="file"のvalue値が変更されたら別のテキストフィールドに表示するというScriptを書いたのですが動作してくれません。 input="file"ではなく普通のテキストフィールドならば動作します。 fileフィールドでは動作しないのでしょうか。それとも書き方がまずいのでしょうか。 以下、ソースです。 <html> <head> <title>test</title> <script type="text/javascript" src="/javascript/prototype.js"></script> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input id="file_test" name="file_test" type="file"> <br> <div id="result">表示</div> <script type="text/javascript"><!-- window.onload = function() { new Form.Element.Observer('file_test', 1, function(element, value) { document.getElementById('result').innerHTML = value; }); } //--></script> </form> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScriptによるonClickの使い方
JavaScriptのonClickと関数の使い方で悩んでいます。 現在、divブロック表示非表示切り替えスクリプト：http://designlabolatory.blog16.fc2.com/blog-entry-139.htmlを参考に、ボタンを押して内容の表示・非表示を行いたいと思っています。 <form name="btnname"> <input type="button" name="inpname1" value="▼" onClick="openclosebtn1()"> <div id="openclose1" style="display:none;"> 内容：１ </div> <input type="button" name="inpname2" value="▼" onClick="openclosebtn2()"> <div id="openclose2" style="display:none;"> 内容：１ </div> <input type="button" name="inpname3" value="▼" onClick="openclosebtn3()"> <div id="openclose3" style="display:none;"> 内容：１ </div> </form> 上記のように１つのformの中で、複数の項目のボタンを押して表示・非表示を行うのに、 function openclosebtn1(){ } function openclosebtn2(){ } function openclosebtn3(){ } ３つの関数にそれぞれbuttonのnameとdivのidを変えて書いています。 これを、１つの関数にうまくまとめたいのですが、いまいち方法がわかりません。 JavaScript初心者で、勉強不足なのは重々承知です。 手元にある本を読んでも書き方がわかりません。 わかる方アドバイスお願いします。
- ベストアンサー
- JavaScript
- 計算結果の表示方法について
お世話になります。 Java Scriptの記述方法で教えてください。 下記のフォームを作りました。 テキストボックスに目標タイムを4時間30分であれば4.5と入力することで必要な時速とキロ当たりのペースを出すようにしています。 2行に渡り、キロ当たりのペースを分と秒で出ていますがが、これを○分○秒と1行に表示させたいのです。 どなたかお知恵をお願いします。 <html> <head> <script type="text/javascript"> function calc(frm) { var result = Math.round(42.195 / (parseFloat(frm.elements["a"].value))*10) / 10; document.getElementById('result_1').getElementsByTagName('span')[0].innerHTML = result; result = Math.floor(parseFloat(frm.elements["a"].value) / 42.195 * 60); document.getElementById('result_2').getElementsByTagName('span')[0].innerHTML = result; result = Math.round(parseFloat(frm.elements["a"].value) / 42.195 * 60*60)%60; document.getElementById('result_3').getElementsByTagName('span')[0].innerHTML = result; result = Math.round(1 / 42.195 * 5 * parseFloat(frm.elements["a"].value) *100) /100; document.getElementById('result_4').getElementsByTagName('span')[0].innerHTML = result; } </script> </head> <body> <form> <input type="text" name="a"> <input type="button" value="計算" onClick="calc(this.form)"><br> 計算結果<br> <div id="result_1">時速 <span></span>km/h</div> <div id="result_2">キロペース <span></span>分</div><div id="result_3"> <span></span>秒</div> <div id="result_4">5km <span></span>時間</div> </form> </body>
- ベストアンサー
- JavaScript
- 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
- JavaScriptで得た値を別ページに反映
JavaScriptで得た値を別ページに反映させたいと思っています。 同一ページでは上手くいきますが、別ページへの反映ができません。 教えてください、宜しくお願いします。 同一ページのサンプル <html> <head> <title>aa</title> <Script LANGUAGE='JavaScript'> <!-- function fncDisp() { label1.innerHTML = document.form1.txt.value; } --> </Script> </head> <body> <form name='form1' action=''> <div id='label1'>ここに表示</div> <input type='text' name='txt' value=''> <input type='button' name='btn' value='ボタン' onClick='fncDisp()'> </form> </body> </html>
- 締切済み
- JavaScript
- 引数のある関数をhtml読み込み後に実行
次のhtmlとスクリプトでresultのような結果を得たいのですが、スクリプトがheadにあるとエラーが出てしまいます。 body直前にスクリプトを置けば動作はするのですが、head内で動作させるにはどうしたら良いのでしょうか？ [html] <div id="here"></div> [JavaScript] function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = '<p>content</p>'; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); [result] <div id="here"> <span> <p>content</p> </span> </div> よろしければどなたかアドバイスを頂けると助かります。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- javaScript Nullまたはオブジェクトではありません エラー
javaScriptは詳しくなく、サンプルプログラムを 参考にさせていただきながらテストをしています。 現在javaScriptで、タブ切り替えで表示内容を変更し、 表示されたフォームに、data.textの内容を表示するという テストをしています。 [コード] <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title></title> <script type="text/javascript"><!-- function loadTextFile() { httpObj = new ActiveXObject("Microsoft.XMLHTTP"); httpObj.onreadystatechange = statusCheck; httpObj.open("GET","data.txt",true); httpObj.send(null); } function statusCheck() { if ((httpObj.readyState == 4) && (httpObj.status == 200)) { displayData(); } } function displayData() { document.ajaxForm.result.value = httpObj.responseText; } // --></script> </head> <body> 省略(タブの切り替え設定) <div style="display:none" id="NAME11"> test1 </div> <div style="display:none" id="NAME22"> <form name="ajaxForm"> <input name="button" type="button" onClick="loadTextFile()" value="読み込み"> <textarea name="result" cols="40" rows="5"></textarea> </form> </div> <div style="display:none" id="NAME33"> test3 </div> </body> </html> ------------------------ 上記を実行すると "document.ajaxForm.resultは Nullまたはオブジェクトではありません" というエラーになってしまいます。 よろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- 2つのjavascriptを組み合わせたい
フォームメール用の2つのjavascriptがあります。 ●2重送信防止とデータ送信後指定ページへ遷移するjavascript ●テキストボックスが空欄だった時にアラートを表示するjavascript の2つです。 この2つを組み合わせようとしたのですが、うまく動きません。 ご指導いただきたくお願いいたします。 *************************************************** 【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】 送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTML送信キャンセル event.preventDefault(); //フォーム要素取得 var $form = $(this); // 送信ボタンを取得 // （後で使う: 二重送信防止） var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, // 送信前 beforeSend: function(xhr, settings) { // ボタン無効二重送信防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタン有効再送信許可 $button.attr('disabled', false); }, // 通信成功処理 success: function(result, textStatus, xhr) { // 入力値初期化 $form[0].reset(); location.href = "finish.html"; }, // 通信失敗処理 error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信A"> </form> *************************************************** 【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】 テキストボックスが空欄だったらアラートを表示します。 <script> function check3() { var tel3 = document.form1.tel.value; var fax3 = document.form1.fax.value; var isValid = true; if (!tel3) { alert("電話未入力"); isValid = false; } if (!fax3) { alert("FAX未入力"); isValid = false; } if (!isValid) { return; } document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form> *************************************************** 【上記の2つを組み合わせてみました。】【動きません】 テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。 【結果】 「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、 finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { event.preventDefault(); var $form = $(this); var $button = $form.find('button'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, beforeSend: function(xhr, settings) { $button.attr('disabled', true); }, complete: function(xhr, textStatus) { $button.attr('disabled', false); }, success: function(result, textStatus, xhr) { $form[0].reset(); location.href = "finish.html"; }, error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <script> function check3() { var tel3 = document.form1.tel.value; var fax3 = document.form1.fax.value; var isValid = true; if (!tel3) { alert("電話未入力"); isValid = false; } if (!fax3) { alert("FAX未入力"); isValid = false; } if (!isValid) { return; } document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form>
- ベストアンサー
- JavaScript
お礼
ご回答有難う御座います。 まだまだ知識が不十分なので、一度自分で最初から記述することにしました。 知識を得てからまた改めてご意見を参考させていただきます。 このたびは有難う御座いました。