• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:JSで一つのボタンを押したとき、二つの内容を表示させる方法を教えて下さい)

JSで一つのボタンを押したとき、二つの内容を表示させる方法

このQ&Aのポイント
  • JSを使用して、一つのボタンを押したときに二つの内容を表示させる方法を教えてください。
  • 例えば、ボタン1を押すとインプット1には商品名が表示され、インプット2には商品の値段が表示されるような仕組みです。
  • 現在の方法では、一つのインプットにしか入力されないため、二つのインプットに異なる内容を表示させることができません。

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

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

まちがえた^^; <form> <p> <input type="text" id="a"><br> <input type="text" id="b"><br> <input type="text" id="c"><br> <input type="button" value="初期値" onClick=" setValue('a','abc','b','def','c','ghi'); "> </p> </form> <script type="text/javascript"> function setValue () { var cnt = 0; var o; var e; while (o = arguments[cnt++]) { e = ( typeof( o ) == 'string' )? document.getElementById( o ): o; if (e && e.tagName == 'INPUT' && e.type == 'text') e.value = arguments[cnt++]; } } </script>

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

noname#84373
noname#84373
回答No.1

<form> <p> <input type="text" id="a"><br> <input type="text" id="b"><br> <input type="text" id="c"><br> <input type="button" value="初期値" onClick=" setValue('バカボンパパは、いつの間にか俺の年下。', 'a','b',document.getElementById('c')) "> </p> </form> <script type="text/javascript"> function setValue (str) { var cnt = 1; var o; var e; while (o = arguments[cnt++]) { e = ( typeof( o ) == 'string' )? document.getElementById( o ): o; if (e && e.tagName == 'INPUT' && e.type == 'text') e.value = str; } } </script>

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • HTMLとJSでtxet内容を表示したい

    下記のコードで質問があります。 仕様としてはtextに何かを書き込んで追加ボタンでテキストボックスの下に書き込んだ内容が表示され保存されるという風にしたいですが途中から何を書けばいいかわからなくなってしまいました。 ご指導お願いいたします <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <head> <body> <input type="text" id="form_txt"> <input type="button" width="50" value="追加" onclick="add_txt()"> <script> function add_txt() { var result = document.getElementById('form_txt'); /*ここからが何を書けばいいかわかりません・・・。*/ } </script> </body> </html>

  • HTML・CSS ボタンの表示

    <div class="item"> <tr> <td><input type="button" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" value="お弁当" onclick="get_calc(this)"></td> </tr> </div> ボタンを画面の50%の幅に均一の大きさで表示したです. CSSわかる方,教えてください!お願いします!

    • ベストアンサー
    • CSS
  • 超初心者です。buttonをselectに変えるには?

    <SCRIPT language="JavaScript"> function calc1(){document.keisan.Z.value=eval(document.keisan.X.value)*1;} function calc2(){document.keisan.Z.value=eval(document.keisan.X.value)*2;} function calc3(){document.keisan.Z.value=eval(document.keisan.X.value)*3;} </SCRIPT> </head> <FORM name="keisan" > <INPUT type="text" name="X" size="4"> <INPUT type="text" name="Z" size="6"> <INPUT type="button" value="1" onClick="calc1()"> <INPUT type="button" value="2" onClick="calc2()"> <INPUT type="button" value="3" onClick="calc3()"> <INPUT type="reset" value="やりなおし"> </FORM> これの INPUT type="button"を<select>~<select> に変えたいと思っています。 自分の頭ではいろいろやってもうまくいきませんでした。 どなたか御教授を宜しくお願い致します。

  • フォームの表示が消えてしまう・・・

    初歩的なことでつまづいております。 フォームを利用して「入力」フォームに文字を入れ、「入力!」ボタンを押すと「結果」フォームにその文字を表示させたいのですがうまくいきません。 やりたいことは、 1.「入力」フォームに文字を入れます(たとえば"123") 2.「入力!」ボタンを押します 3.すると「結果」フォームに"123"と表示させたいです  4.また、「入力」フォームにはそのまま"123"が表示されたままにしたいです なぜか下記の記述だとボタンを押した瞬間にすべてのフォームの文字表示が消えてしまいます。 これはどうしてなのでしょうか?すみませんがよろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"><!-- function calcButton() { var inputValue = document.calc.input.value; document.calc.result.value = inputValue; } //--></SCRIPT> </HEAD> <BODY> <FORM name="calc" action=""> 入力<INPUT type="text" size="5" name="input"><BR> 結果<INPUT type="text" size="5" name="result"><BR> <INPUT type="submit" value="入力!" onClick="calcButton()"> </FORM> </BODY></HTML>

  • ボタンでテキスト領域に文字列を表示させたい

     非常に初歩的なことでしょうが、ネットや書籍を見ても以下の ことが分かりません。お教えください。 ボタンを押すことで目的の文字列をフォームのテキスト領域に表 示したいのです。例えば、 <form> <input type="button" onClick=???? value="Click!"> <input type="text" size="10"> </form>  という内容で、onClickの右側をどう書いたらよいか分かりません。 document.write("文字列")だと、画面が更新されてボタンやテキ スト領域まで消えてしまうので、だめです。本を参考にして、 「document」のところを「document.form.txt」に変えればよい のかと考えたのですが、それではエラーがでます。  よろしくご教示ください。

  • JqueryMobileでフォームボタンを非表示

    JqueryMobileを使用している環境下でフォームボタンを非表示にする方法を探しています。 以下はID1の消去ボタンをクリックすると、ID2のボタンが消えることを期待しているものです。 しかし、ID2のボタンは消えませんでした。 どのような方法で、フォームボタンを非表示にできるのでしょうか。 なお、JqueryMobileを使用していない環境では、 問題なくID2のボタンが非表示になることを確認していますので、 JqueryMobile使用時のJavascriptの制限が何かしらありそうなのですが・・・。 <form name="myForm" action="#"> <input type="button" value="消去" name="button1" id ="1" onclick="a()"> <input type="button" value="消えるボタン" name="button2" id ="2" > </form> <script type="text/javascript"> <!-- function a(){ var n = document.getElementById("#2"); n.style.visibility = "hidden"; $('#2').button('refresh'); } // --> </script>

  • javascript ボタンによる表示について

    javascriptのボタンによる表示について質問があります. 質問内容と致しましては,ボタンを表示した時に隠れている問題文を出現させるソースを作っているのですが,うまくプログラムが動作しません. おそらく,window.onloadの使い方が理解しきれてないからだとは思いますが, よくわかりませんので質問させていただきました. 回答の方よろしくお願いします. 以下ソースです. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function hideForm1(){ document.getElementById("formblock1").style.display = "none"; } function showForm1() { document.getElementById("formblock1").style.display = "block"; } window.onload = function(){ hideForm1(); }; function hideForm2(){ document.getElementById("formblock2").style.display = "none"; } function showForm2() { document.getElementById("formblock2").style.display = "block"; } window.onload = function(){ hideForm2(); }; function hideForm3(){ document.getElementById("formblock3").style.display = "none"; } function showForm3() { document.getElementById("formblock3").style.display = "block"; } window.onload = function(){ hideForm3(); }; function send(){ function chk1(frm, names){ var r = true; for(var i = 0; i < names.length; i++) r &= (frm.elements[names[i]].value !=""); return r; } var r = true; r &= chk1(document.forms['nform'],['kaitouran11','kaitouran12','kaitouran13','kaitouran14','kaitouran21','kaitouran22','kaitouran23','kaitouran24','kaitouran31','kaitouran32','kaitouran33','kaitouran34']); if(r){ document.forms['nform'].submit(); }else{ alert('解答欄に空白があります'); } } </script> </head> <body> <form> <input type="button" value="問題1" onclick="showForm1(); this.disabled = true;"/> </form> <form> <input type="button" value="問題2" onclick="showForm2(); this.disabled = true;"/> </form> <form> <input type="button" value="問題3" onclick="showForm3(); this.disabled = true;"/> </form> <form name="nform" method="post" action="./kaitou1.php" enctype="multipart/form-data"> <div id="formblock1"> <p> 問題1</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran11" size="14"> (2)<input type="text" name="kaitouran12" size="14"> (3)<input type="text" name="kaitouran13" size="14"> (4)<input type="text" name="kaitouran14" size="14"> </p> </div> <div id="formblock2"> <p> 問題2</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran21" size="14"> (2)<input type="text" name="kaitouran22" size="14"> (3)<input type="text" name="kaitouran23" size="14"> (4)<input type="text" name="kaitouran24" size="14"> </p> </div> <div id="formblock3"> <p> 問題3</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran31" size="14"> (2)<input type="text" name="kaitouran32" size="14"> (3)<input type="text" name="kaitouran33" size="14"> (4)<input type="text" name="kaitouran34" size="14"> </p> </div> </form> <input type="button" value="送信" onclick="send()"> </body> </html>

  • ボタンを押すたびに画像を切り替えるには?

    まずソースを載せます↓ <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=shift-jis"> <title>ボタンを押すたびに画像を表示します</title> <body bgcolor="#FFFFFF"> <script type="text/javascript"> function func1(str) { document.write('<img src="c:/MyImage/dog1.jpg" width="104" height="91" />'); } function func2(str) { document.write('<img src="c:/MyImage/dog2.jpg" width="104" height="91" />'); } function func3(str) { document.write('<img src="c:/MyImage/dog3.jpg" width="104" height="91" />'); } function func4(str) { document.write('<img src="c:/MyImage/dog4.jpg" width="104" height="91" />'); } </script> </head> <body bgcolor="#FFFFFF"> <form id="myForm" name="myForm"><p> <input type="button" value="ボタン1" name="button1"onclick="func1('dog1.jpg');"> <input type="button" value="ボタン2" name="button2"onclick="func2('dog2.jpg');"> <input type="button" value="ボタン3" name="button3"onclick="func3('dog3.jpg');"> <input type="button" value="ボタン4" name="button4"onclick="func4('dog4.jpg');"> </p></form> </body> </html> 今回の質問内容はボタンを押すたびに画像を表示するjavascriptプログラムです 画像はCドライブ直下のMyImageフォルダにdog1.jpg,,dog2.jpg,dog3.jpg, dog4.jpgを入れています なんで動かないのがわからないです 回答できたらよろしくお願いします

  • javaで name=id[?] を指定する方法とは?

    ショップ運営で、商品一覧から+-ボタンでそれぞれ数の増減をさせるよう、ほかのサイトを参考にして下記のようにjavascriptで記述してみました。 このうち、商品2と3はボタンが機能したのですが、商品1は数の増減ができません。 おそらく要素名に(name=id[1])と[]で囲っているからだと思うのですが、この[]を取らないまま、ボタンを機能させる方法はありますでしょうか? よろしくお願いします。 <FORM> 商品1:<INPUT type=text name=id[1] value=3 size=4> <INPUT type=button value="+" onClick="plus(this.form.id[1])"> <INPUT type=button value="-" onClick="minus(this.form.id[1])"> <BR> 商品2:<INPUT type=text name=id2 value=3 size=4> <INPUT type=button value="+" onClick="plus(this.form.id2)"> <INPUT type=button value="-" onClick="minus(this.form.id2)"> <BR> 商品3:<INPUT type=text name=id3 value=3 size=4> <INPUT type=button value="+" onClick="plus(this.form.id3)"> <INPUT type=button value="-" onClick="minus(this.form.id3)"> </FORM> <SCRIPT language="JavaScript"> <!-- function plus(chk){chk.value++; if (chk.value==6) {chk.value=5} } function minus(chk){chk.value--; if (chk.value==0) {chk.value=1} } // --> </SCRIPT>

  • 複数ボタンを制御出来る2度押し防止ボタン

    HTML5+CSS3でゲームを作っています。 フォームがあり、ボタンが複数並んでいます。 <SCRIPT TYPE="text/javascript"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" name="d4_buy" value="300 onclick="sendform()">300購入</button> <button class="button8" type="submit" name="d4_buy" value="400" onClick="sendform()">400購入</button> </FORM> 上記で正常に作動しますが、3G環境など通信状態の悪い時に、「300購入ボタンを押した直後に400購入ボタンを押す」と700購入が出来てしまいます。 【希望事項】 2つのボタンを連続して押しても2つ目が無効になるようにしたいというのが希望です。 ネットで調べたところ ****************************************** http://okwave.jp/qa/q627484.html ****************************************** <HTML><BODY> <FORM method="get" action="http://www.google.com/search"> <INPUT type="submit" value="submit1" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="submit" value="submit2" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="hidden" name="q" value="" > </FORM></BODY></HTML> ****************************************** という例があったため、この例に従って <SCRIPT TYPE="text/javascript"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" value="300 onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">300購入</button> <button class="button8" type="submit" value="400" onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">400購入</button> <INPUT type="hidden" name="d4_buy" value="" > </FORM> としてみたのですが、うまく数値の引き渡しが出来ません。(NULL となります) どのように改造すればいいか教えてください。 よろしくお願いいたします。