Javascriptを使ってHTMLを書き換える方法とは？
- Javascriptを使用してt.htmlの画面を書き換える方法について教えてください。
- また、リンクが最初から表示されるようにする方法も教えてください。
- Javascriptを使わずに同じことを実現する方法があれば、それも教えてください。
- ベストアンサー
javascriptでhtmlの書き換え
t.htmlというファイルで、下のような画面を作ります。 example1へ「Ｔｏｐへ」 example2へ「top.html」 と入力してボタンを押すと、 <a href="top.html" target="_blank"> Ｔｏｐへ </a> というリンクが「インデックスを開く」の下に現れる というふうにしたいです。 また、再度t.htmlを開いた時には、前回追記したリンクが最初から表示されているようにしたいです。 javascriptを使って実現するにはどうしたらよいでしょうか？ 若しくは、javascritpを使わずにできる方法があれば教えてください。 よろしくお願いします。 ######################################################## <a href="index.html" target="_blank"> インデックスを開く </a> <input type="text" name="example1" size="50"> <input type="text" name="example2" size="50"> <input type="button" value="汎用ボタン"> ######################################################## ↓ ######################################################## <a href="index.html" target="_blank"> インデックスを開く </a> <a href="top.html" target="_blank"> Ｔｏｐへ </a> <input type="text" name="example1" size="50"> <input type="text" name="example2" size="50"> <input type="button" value="汎用ボタン"> ########################################################
- chugokuSSS
- お礼率85% (6/7)
- その他(ソフトウェア)
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まずブラウザ上で扱うJavaScriptはファイルの書き換えが出来ないということはご存知だと思います。 そこでCookieというのを利用してみてはいかがでしょうか。 bodyのonloadの部分でcookieを読み込むようにして、それを描写するようなコードにすれば実現できるのではないかなと思います。 もちろん「ボタンを押して」という部分でcookieへデータを退避させるようにもさせますが。
関連するQ&A
- ボタン別でフォームの送信先を変えたい
同じ場所に3つある今のフォームを1つにまとめたいのですが、 「ラジオボタン」でやるのではなく「submitボタン」によって送信先の振り分けはできないのでしょうか？ CGIなどを使って一旦クッションを置くのは問題ないです。何か参考になるサイトさんとかありましたら教えてください。 <form action="1.php" method="get" class="form" target="a" name="1"> <input type="hidden" name="s" value=90 /> <input type="hidden" name="t" value="e" /> <input type="text" name="moji" value="" size="8" /> <input type="submit" name="button" value="検索" /> </form> <form action="http://e.php" method="get" name="2" target="a"> <input type="hidden" name="test" value=et /> <input type="text" name="77" value="" size="8" /> <input type="submit" value="検索2" class="button" /> </form> <form action="http://8.cgi" method="get" target="a"> <input type="text" size="8" name="q" value="" /> <input type="submit" value="検索3" class="button" /> <input type="hidden" name="sut" value="JJ" /> </form>
- ベストアンサー
- CGI
- javascriptによる計算
テキストボックス「a1～6」の値とテキストボックス「b1～6」に入力された値を足し算してテキストボックス「ｃ1～6」（例…c[i] = a[i] + b[i]）を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。 以下ソース↓ <script language ="JavaScript"> function plus() { var intResult = 0; for (i=1; i<=6; i++){ intResult[i] = 0; if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){ intResult[i] += parseInt(document.forms["A"].all["a"+i].value); intResult[i] += parseInt(document.forms["B"].all["b"+i].value); } <table border = 1> <tr> <td> <table border = 1> <tr> <td> <form name="A"> <input type = "text" size = 5 name = "a1"></input> </td> <td> <input type = "text" size = 5 name = "a2"></input> </td> <td> <input type = "text" size = 5 name = "a3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a4"></input> </td> <td> <input type = "text" size = 5 name = "a5"></input> </td> <td> <input type = "text" size = 5 name = "a6"></input> </form> </td> </tr> </table> </td> <td> <table boeder = 1> <tr> <input type = "button" onClick="plus()" value = "＋"></input> </tr> </table> </td> <td> <table border = 1> <tr> <td> <form name = "B"> <input type = "text" size = 5 name = "b1"></input> </td> <td> <input type = "text" size = 5 name = "b2"></input> </td> <td> <input type = "text" size = 5 name = "b3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b4"></input> </td> <td> <input type = "text" size = 5 name = "b5"></input> </td> <td> <input type = "text" size = 5 name = "b6"></input> </form> </td> </tr> </table> </td> </tr> </table> 答え <form name = "C"> <table border = 1> <tr> <td> <input type = "text" size = 5 name = "c1"></input> </td> <td> <input type = "text" size = 5 name = "c2"></input> </td> <td> <input type = "text" size = 5 name = "c3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c4"></input> </td> <td> <input type = "text" size = 5 name = "c5"></input> </td> <td> <input type = "text" size = 5 name = "c6"></input> </td> </tr> </table> </form> </body> document.C.all["c"+i].value = intResult[i]; } } </script>
- ベストアンサー
- JavaScript
- [javascript]ホームページタグの書き換えとonclickについて
どうしても、うまくいかない部分が2点ありますので分かる方、手直ししていただけないでしょうか？ さまざまなHPを参考にして、下記、ソースを作成しました。 送信aを、 実行すると、新しいウィンドウが開きます。 そして、相手からの受信を待たず、 送信b を実行すると、 送信aの結果が反映されないことがよくあります。 同一の、ウィンドウに再度表示され、正常に受信終わる前に閉じた状態になるため、エラーになると思っています。 そこで、これを何とか、克服する方法はないものでしょうか？ また、javascriptを用いて、 <form action="url.cgi?acc=■" method="post"> の■の部分を、毎回好きな数字に書き換えたいのですが何か、よい方法はないものでしょうか？ 以上2点ありますが、分かる方のみでもとても助かりますので、手直しのほど、何卒、宜しくお願い致します。 <script language=javascript> function submitByNewWindow(frm) { window.open('','new','width=500,height=400,left=0,top=0,scrollbars=yes'); frm.target = "new"; frm.submit(); } </script> ■へ入れる文字→[ ] <BR> <form action="url.cgi?acc=■" method="post"> <input type="text" name="do" value="a"> <input type="hidden" name="type" value="other"> <input type="button" onclick="submitByNewWindow(this.form);" value="送信a";> </form> <form action="url.cgi?acc=■" method="post"> <input type="text" name="do" value="b"> <input type="hidden" name="type" value="other"> <input type="button" onclick="submitByNewWindow(this.form);" value="送信b";> </form>
- ベストアンサー
- JavaScript
- ▲▲JavaScriptに詳しい人見てください▲▲
いつもお世話になります。 恐れ入りますがお力添えお願い致します。 フォーム（名前は f とする）を使用して、 10問の足し算問題を画面に表示して計算練習できるようにする。 問題は1～10の自然数同士の足し算とする。 各問題ごとに，問題を表示するテキストボックス（名前は p1 ～ p10 とする） 解答を入力するためのテキストボックス（名前は a1 ～ a10 とする） ○×をつけるためのテキストボックス（名前は c1 ～ c10 とする）を用意する。 答え合わせをするためのボタンと 正答数，誤答数を表示するテキストボックス（名前は ok, ng とする）を用意する。 プログラム内部では，正解を保存するための配列（変数名は sol とする）を用意し 乱数を用いて 第1問 ～ 第10問 を生成するとともに それらの正解を sol[1] ～ sol[10] に保存する。 ユーザは，解答欄（a1 ～ a10）に解答を記入し，答え合わせボタンをクリックする。 答え合わせボタンがクリックされると，各問題（iとする）について，解答欄（ai）の内容と 正解（sol[i]）の内容を照合して，正誤欄(ci)に○×をつけ，同時に正答数・誤答数をカウントする。 10問全てに○×をつけた後，正答数（ok），誤答数（ng）を表示する。 今回は，問題を作成してフォーム（テキストボックス）に表示するだけとし 答え合わせのためのコードなどは実装しない．したがって 答え合わせボタンのイベントハンドラは記述しなくて良い。 ただし，配列 sol を用意して，そこに正解を保存するところまでは作成すること。 正解を保存する配列は，（今後作成する）答え合わせボタンのイベントハンドラからも参照されるので， 変数 sol は大域変数とすること。 問題の生成には myRandom(n) 関数を用いてもよい。 と言う課題です 雛形は以下のように作りました。 <title>JavaScript Task 8-1, prototype</title> <script type="text/javascript"> <!-- /* 配列 sol は大域変数としてここで記述しておく方がよい・・？ */ /* 関数 myRandom(n) を定義するなら，このあたりでするべき・・・？ */ function initialize() { /* ここで問題を作成して p1 ～ p10 に書きこむ */ /* 各問題の正解を配列 sol に保存する */ } //--> </script> <body onload="initialize();"> <h1>計算練習プログラム (2)</h1> <form name="f" action=""> <table border="1"> <tr><td>番号</td><td>問題</td><td>解答</td><td>正誤</td></tr> <tr><td>1</td> <td><input name="p1" size="9" type="text" readonly></td> <td><input name="a1" size="3" type="text"></td> <td><input name="c1" size="3" type="text" readonly></td></tr> <tr><td>2</td> <td><input name="p2" size="9" type="text" readonly></td> <td><input name="a2" size="3" type="text"></td> <td><input name="c2" size="3" type="text" readonly></td></tr> <tr><td>3</td> <td><input name="p3" size="9" type="text" readonly></td> <td><input name="a3" size="3" type="text"></td> <td><input name="c3" size="3" type="text" readonly></td></tr> <tr><td>4</td> <td><input name="p4" size="9" type="text" readonly></td> <td><input name="a4" size="3" type="text"></td> <td><input name="c4" size="3" type="text" readonly></td></tr> <tr><td>5</td> <td><input name="p5" size="9" type="text" readonly></td> <td><input name="a5" size="3" type="text"></td> <td><input name="c5" size="3" type="text" readonly></td></tr> <tr><td>6</td> <td><input name="p6" size="9" type="text" readonly></td> <td><input name="a6" size="3" type="text"></td> <td><input name="c6" size="3" type="text" readonly></td></tr> <tr><td>7</td> <td><input name="p7" size="9" type="text" readonly></td> <td><input name="a7" size="3" type="text"></td> <td><input name="c7" size="3" type="text" readonly></td></tr> <tr><td>8</td> <td><input name="p8" size="9" type="text" readonly></td> <td><input name="a8" size="3" type="text"></td> <td><input name="c8" size="3" type="text" readonly></td></tr> <tr><td>9</td> <td><input name="p9" size="9" type="text" readonly></td> <td><input name="a9" size="3" type="text"></td> <td><input name="c9" size="3" type="text" readonly></td></tr> <tr><td>10</td> <td><input name="p10" size="9" type="text" readonly></td> <td><input name="a10" size="3" type="text"></td> <td><input name="c10" size="3" type="text" readonly></td></tr> </table> <input value="答え合わせ" type="button"><br> 正答数：<input name="ok" size="3" type="text" readonly> 誤答数：<input name="ng" size="3" type="text" readonly> </form> </body> function initialize()の中身をどうしたらいいのかが分かりません。
- ベストアンサー
- JavaScript
- JavaScriptでこんな事って出来ますか？
JavaScript超初心者です。最近本を買って、ネットで調べながら勉強中なのですが、とても難しいです。 現在この様な事が出来ないかと色々調べているのですが、JavaScriptで、出来ますでしょうか？可能であれば、勉強もかねて作ってみようと思うのですが？ 何も意味の無いスクリプトですが、一行テキスト3つに 入力したものを、各場所に配置して出力させる！と言うものです。まだ何も出来ていませんが、ソースを見ていただければと思います。 ソースです。 <FORM>ここにURL<BR> <INPUT size="50" type="text"><BR> ここにalt<BR> <INPUT size="50" type="text"><BR> ここに表示文章<BR> <INPUT size="50" type="text"><BR> <INPUT type="button" name="button" value="出力"><BR> ここに出力<BR> <TEXTAREA rows="5" cols="50"></TEXTAREA></FORM> といった感じです。出力結果として、 <a href= "1行目のURL" alt="2行目のalt">3行目の表示文章</a> のような感じで、最後のテキストボックスに表示させたいと思います。この様なことは、JavaScriptで可能でしょうか？可能な場合、どの辺を勉強すればいいでしょうか？変な質問ですが、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascript フォームについて
javascriptでフォームを作ったのですが、複数フォームの空白をチェックするにはどのようなプログラムにすればよろしいでしょうか？ onsubmit="return chk1(this)でフォーム送信が押されたときにチェックを行おうと考えているのですが そのときのchk()の中身やif文の条件がわからないのです。 どのようにすれば上手くいくでしょうか？ 回答よろしくお願いします。 ソースは以下のとおりです。 <script language="javascript"> function send() { document.nform.submit(); document.nform2.submit(); document.nform3.submit(); } function chk1(frm){ if(frm.elements["txt1"].value==""){ alert("解答欄に空白があります"); /* FALSEを返してフォームは送信しない */ return false; }else{ /* TRUEを返してフォーム送信 */ return true; } } </script> <form name="nform" method="POST" action="mailto:webmaster@a.com?subject=問い合せ" enctype="text/plain"> <p>問1</p> <p> (1)<input type="text" name="kaitouran11" size="20"> (2)<input type="text" name="kaitouran12" size="20"> (3)<input type="text" name="kaitouran13" size="20"> (4)<input type="text" name="kaitouran14" size="20"> </p> </form> <form name="nform2" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問2</p> <p> (1)<input type="text" name="kaitouran21" size="20"> (2)<input type="text" name="kaitouran22" size="20"> (3)<input type="text" name="kaitouran23" size="20"> (4)<input type="text" name="kaitouran24" size="20"> </p> </form> <form name="nform3" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問3</p> <p> (1)<input type="text" name="kaitouran31" size="20"> (2)<input type="text" name="kaitouran32" size="20"> (3)<input type="text" name="kaitouran33" size="20"> (4)<input type="text" name="kaitouran34" size="20"> </p> </form> <input type="button" value="送信" onClick="send()" onsubmit="return chk1(this)">
- ベストアンサー
- JavaScript
- フォームの一部をPOSTで送信できますか？
フォームのPOST自体をあまり理解できていないかも知れないのですが・・・ onClickイベントでJavascriptでパラメータを送信したいと思っています。 <input type="text" name="text1"> <input type="text" name="text2"> <input type="text" name="text3"> <input type="text" name="text4"> <input type="text" name="text5"> <input type="button" value="ボタン１"> <input type="button" value="ボタン２"> <input type="button" value="ボタン３"> というようなフォームがあった場合、ボタン１を押したらtext1とtext2の値を、 ボタン２を押したらtext1とtext3の値を・・・という風に 送信する内容を変えたいのですが、それをPOSTで渡すことは可能なのでしょうか？ ちなみに送信したい内容は、ボタンが違っても重なっているものもあります。 また可能であれば、どう記述すればよろしいでしょうか？（NNです） よろしくお願いします。
- ベストアンサー
- JavaScript
- Enterキーでボタンが押下＆新しいタブで開くには
こちらで教えていただきながら、下記のようなhtml文にたどり着きました。 加えて以下のことをしたいと思っており、解説を読みながらいろいろ試していますがうまくいきません…。 (1)テキストボックスに文字を入力した後、Enterキーでボタンが押下されるようにしたい (2)結果の画面を新しいタブで表示したい （head部分に<base target="_blank">と記述してもでダメでした） 上記2つのことが出来るようでしたら、その方法を教えていただけないでしょうか。 どうぞよろしくお願いいたします。 -------------------------------------------- <html> <head> <script type="text/javascript"> <!-- function jump1(){ location.href="http://minkabu.jp/stock/" + document.getElementsByName("code1")[0].value; } function jump2(){ location.href="http://kabu-sokuhou.com/brand/item/code___" + document.getElementsByName("code2")[0].value; } //--> </script> <base target="main"> </head> <body> <form> <input name="code1" size="4" > <br><br> <input type="button" onclick="jump1()" value="サイト１へ"> </form> <form> <input type="hidden" name="code2" size="4"> <input type="button" onclick="jump2()" value="サイト２へ"> </form> </body> </html> -----------------------------------------------------
- ベストアンサー
- HTML
- JavaScriptのラジオボタン選択で値取得
JavaScriptでフォームのラジオボタン選択で選択した項目に応じて、複数の変数に特定の数値を入れたいのですが、どうしたらいいでしょうか? ラジオボタンで仮に、 ・東京 ・大阪 ・名古屋 という選択があったとして、 (そのボタンの下部に<input type="button" value="Go!" onclick="hogehoge();">というような実行ボタンがあったとします) 東京を選んだ場合は、 a = 4; b = 3; 大阪を選んだ場合は、 a = 3; b = 2; 名古屋を選んだ場合は、 a = 5; b = 4; と、a/bに数値を入れたいです。 今現在下記のように書いたのですが、動作しません。 <script type="text/javascript"> function hogehoge() { no = document.hoge.a.value - 0; if(no == 1) { n1 = 4; n2 = 3; }else if(no == 2) { n1 = 3; n2 = 2; }else if(no == 3) { n1 = 5; n2 = 4; } document.hoge.no1.value = n1; document.hoge.no2.value = n2; } </script> <form name="hoge"> <input type="radio" name="a" value="1" checked>東京 <input type="radio" name="a" value="2">大阪 <input type="radio" name="a" value="3">名古屋 <br> <input type="button" value="Go!" onclick="hogehoge();"><br> <input type="text" size="5" name="no1"><br> <input type="text" size="5" name="no2"> </form> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 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> 出来ないのがボタンを押すとテキスト内の文字を コピーするという記述なのですが もし解られましたら お手数ですがお教え頂ければ幸いです。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 cookieを使ってみようと思います。 example1へ「Ｔｏｐへ」 example2へ「top.html」 という２つの内容をcookieへ保存する。 cookieを.htmlがある場所へコピーし、ｇａｗｋで編集して.htmlの形に書き換えようかと思います。 実はjavascript初心者で、テキストの処理は慣れているｇａｗｋでやろうと思っていました。