質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

21840閲覧

テキストボックスの値を取得し表示させる

sa_vic

総合スコア13

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2016/01/14 11:44

編集2016/01/14 12:42

以下のソースを利用してホームページにテキストボックスに入力した値を取得し、表示させる機能を複数付けたいのですが、うまく実装できません。

同一ページ内に複数実装するやり方についてアドバイスをお願いします。
よろしくお願いします。

HTML

1 <html> 2 <head> 3 <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> 4 <META http-equiv="Content-Style-Type" content="text/css"> 5 <title></title> 6 7 <script type="text/javascript" language="javascript"> 8 function onButtonClick() { 9 target = document.getElementById("output"); 10 target.innerText = document.forms.form1.textBox1.value; 11 } 12 </script> 13 </head> 14 <body> 15 <form name="form1" action=""> 16 <input name="textBox1" type="text" value="" /> 17 <input type="button" value="OK!" onclick="onButtonClick();" /> 18 </form> 19 <hr /> 20 <div id="output"></div> 21 </body> 22 </html>

以下の様にしましたが、上手くいきませんでした。

HTML

1 <html> 2 <head> 3 <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> 4 <META http-equiv="Content-Style-Type" content="text/css"> 5 <title></title> 6 7 <script type="text/javascript" language="javascript"> 8 function onButtonClick() { 9 target = document.getElementById("output1"); 10 target.innerText = document.forms.form1.textBox1.value; 11 } 12 </script> 13 <script type="text/javascript" language="javascript"> 14 function onButtonClick() { 15 target = document.getElementById("output2"); 16 target.innerText = document.forms.form2.textBox2.value; 17 } 18 </script> 19 </head> 20 <body> 21 <form name="form1" action=""> 22 <input name="textBox1" type="text" value="" /> 23 <input type="button" value="OK!" onclick="onButtonClick();" /> 24 </form> 25 <form name="form2" action=""> 26 <input name="textBox2" type="text" value="" /> 27 <input type="button" value="OK!" onclick="onButtonClick();" /> 28 </form> 29 <hr /> 30 <div id="output1"></div> 31 <div id="output2"></div> 32 </body> 33 </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/01/14 12:11

質問にソースを記述する場合はマークダウン機能を使ってくださいね。
guest

回答1

0

ベストアンサー

html

1<script type="text/javascript" language="javascript"> 2 function onButtonClick() { 3 target = document.getElementById("output1"); 4 target.innerText = document.forms.form1.textBox1.value; 5 } 6</script> 7<script type="text/javascript" language="javascript"> 8 function onButtonClick() { 9 target = document.getElementById("output2"); 10 target.innerText = document.forms.form2.textBox2.value; 11 } 12</script> 13 14<!-- 省略 --> 15 16<form name="form1" action=""> 17 <input name="textBox1" type="text" value="" /> 18 <input type="button" value="OK!" onclick="onButtonClick();" /> 19</form> 20<form name="form2" action=""> 21 <input name="textBox2" type="text" value="" /> 22 <input type="button" value="OK!" onclick="onButtonClick();" /> 23</form>

上の部分を次のように修正してください。

html

1<script type="text/javascript" language="javascript"> 2 function onButtonClick1() { 3 target = document.getElementById("output1"); 4 target.innerText = document.forms.form1.textBox1.value; 5 } 6 function onButtonClick2() { 7 target = document.getElementById("output2"); 8 target.innerText = document.forms.form2.textBox2.value; 9 } 10</script> 11 12<!-- 省略 --> 13 14<form name="form1" action=""> 15 <input name="textBox1" type="text" value="" /> 16 <input type="button" value="OK!" onclick="onButtonClick1();" /> 17</form> 18<form name="form2" action=""> 19 <input name="textBox2" type="text" value="" /> 20 <input type="button" value="OK!" onclick="onButtonClick2();" /> 21</form>

投稿2016/01/14 12:20

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問