Javascriptsによるテキストフィールド上の数字のインクリメントについて
- Web作成中にテキストフィールド上の数字のインクリメントを実装しようとしているが、うまくいかない問題が発生している。
- JavaScriptを使用してテキストフィールドの数字を操作する方法を教えてほしい。
- また、1つだけでなく複数の数字を同時に操作する方法も知りたい。
- ベストアンサー
Javascriptsによるテキストフィールド上の数字のインクリメントについて
お世話になります。 現在やっているゲーム中に使うカウンターとロガーを作成することを思い立ち、HTML+PHP+MySQLにてWebの作成を開始したのですが、その入力フォームを便利にしようとしてちょと詰まってます。 フォーム内容としては テキストフィールド インクリメントボタン デクリメントボタン テキストフィールド インクリメントボタン デクリメントボタン テキストフィールド インクリメントボタン デクリメントボタン サブミットボタン という形で作成しておりまして テキストフィールドには数字を入力しますがその右側にボタンを設けてそのボタンでも数字を操作できるようにしたいのでjavascriptに手を出したのですが、どうにも上手く動かせません。 質問に文字数制限がきついのでちょと簡略化させてもらいまして <script type="text/javascript"><!-- function increment(i) { document.testform.elements["text"+i].value = eval(document.testform.elements["text"+i].value) + 1 } // --></script> </head> <body> <FORM name="testform"> <input type="text" name="text1" value=0><br> <input type="button" value="1" onClick="increment(1)"><br> </FORM> 上記では動くのですが最後のonClick=の後をできればダイレクトに"increment(text1)"にしたく色々いじっているのですがどうにも上手くいきません。 何かアドバイスを頂けないかと思うのですがいかがでしょうか。 よろしくお願いいたします。 また1のインクリメントだけではなく3増やすボタンも同時につけたいと思いますが、こちらのtipsもありましたらお教え頂きたく思います。
- Mamoru99
- お礼率50% (2/4)
- その他(ソフトウェア)
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
＃１です。 ついでなので、+3するボタンを加えた全文です。 <script type="text/javascript"><!-- function increment(a) { document.testform.elements[a].value = eval(document.testform.elements[a].value) + 1 } function increment3(a) { document.testform.elements[a].value = eval(document.testform.elements[a].value) + 3 } // --></script> </head> <body> <FORM name="testform"> <input type="text" name="text1" value="0"><br> <input type="button" value="+1" onClick="increment('text1')"><br> <input type="button" value="+3" onClick="increment3('text1')"><br> </FORM> 因みに、文字列に「i」を使いたくないので「a」に変更してあるだけです。（「i」のままでも動きます。）
その他の回答 (1)
function increment(i) { document.testform.elements["text"+i].value = eval(document.testform.elements["text"+i].value) + 1 } を function increment(a) { document.testform.elements[a].value = eval(document.testform.elements[a].value) + 1 } に <input type="button" value="1" onClick="increment(1)"><br> を <input type="button" value="1" onClick="increment('text1')"><br> に変更する。
関連するQ&A
- 特定のラジオボタンが選択されたらテキストフィールドを入力可
下のような6つのラジオボタンと1つのテキストフィールドのあるフォームがあります。 「あ・い・う・え・お」のラジオボタンが選択されたらテキストフィールドをdisabledに、「か」なら入力可能にしたくて、JavaScriptで次のように記述しました。 一応動作しているように見えるのですが、見よう見まねで書いた初めてJavaScriptなので大丈夫なのか不安です。これで良いのでしょうか。 function txtClose () { if (document.f_frm.motive[5].checked) { document.f_frm.motive_add.disabled = false; } else { document.f_frm.motive_add.disabled = true; } } <form name="f_frm"> <input type="radio" name="motive" value="あ" onclick="txtClose();" />あ<br /> <input type="radio" name="motive" value="い" onclick="txtClose();" />い<br /> <input type="radio" name="motive" value="う" onclick="txtClose();" />う<br /> <input type="radio" name="motive" value="え" onclick="txtClose();" />え<br /> <input type="radio" name="motive" value="お" onclick="txtClose();" />お<br /> <input type="radio" name="motive" value="か" onclick="txtClose();" />か<br /> <input type="text" name="motive_add" size="20" maxlength="40" onclick="txtClose();" /> </form>
- ベストアンサー
- JavaScript
- テキストフィールドへの値の表示
JavaScript初心者です。現在、言語習得のためのドリルをおこなっておりますが、２つのテキストフィールド間での値の受け渡しがうまくいきません。具体的には、上下２つのテキストフィールドがあり、上のフィールド（摂氏）に数値を入れボタンを押したタイミングで、その値を華氏に変換して下のフィールドに結果の値が表示される、またその逆もあり、というプログラムを作成したいのです。 テキストフィールドのvalueに値を格納すればよいのかと思い、いろいろな箇所で値を格納してみたのですが、うまく動きません。アドバイスをよろしくお願いいたします。 <html> <head> <script type="text/javascript"> var cel; var fah; function cel_to_fah( ) { cel=document.getElementById("c").value; fah=(9 * cel / 5) + 32 //document.write(fah); document.input_fah.c.value=fah; //return fah; } function fah_to_cel(){ fah= document.getElementById("f").value; cel= 5 * (fah - 32) / 9; //document.write(cel); document.input_cel.f.value=cel; //return cel; } </script> </head> <body> <form id="input_fah" action="./hw06-3.html" > Celsius: <input type="text" id="c" size="20" > <input type="button" onclick="cel_to_fah()" value="To Fahrenheit"/><br/><br/> </form> /* <script language="JavaScript"> document.input_fah.c.value=cel_to_fah(); </script> */ <form id="input_cel" action="./hw06-3.html" > Fahrenheir: <input type="text" id="f" size="20"> <input type="button" onclick="fah_to_cel()" value="To Celsius" /><br/><br/> </form> /* <script language="JavaScript"> document.input_cel.f.value=fah_to_cel( ) </script> */ </body> </html>
- ベストアンサー
- JavaScript
- ■フォームのテキストで書かれた数字を受け取るにはどうすればいいのでしょうか？
HTML内で <form> <input type="text" name="a" value="a"> <input type="button" name="b" value="b" onClick="zzz()"> <input type="text" name="c" value="c"> </form> 外部JavaScript内で function zzz() { フォームのテキストaの中に打ち込んだ数字を受け取って、テキストcの中に表示させる関数 } 上記のようなことをしたいのですが（意味がないと言われてしまえばそうです＾＾；）やり方を教えていただけないでしょうか？ あと、フォームの内容がよくわからないので、勉強できるサイトなどありましたら教えていただけないでしょうか？ 現在わかっているのは、typeが形を作るってことと、onClickがボタンを押したときのことっていうだけです。 name valueとかまったく意味不明です。 最後に、ボタンをマウスでクリックしなくてもエンターキーを押すだけでクリックしたことになる方法を教えていただければ幸いです。 よろしゅうお願いします！
- ベストアンサー
- JavaScript
- 1つのフォームで複数のnameに対応させるには？
■前提 ・1つのフォーム ・複数ボタン ・複数の送信先へテキストを送り、キーワード検索させたい ■現状 <form name="testform" method="get"> <input type="text" name="hoge" /> <input type="image" src="ボタン画像1" onClick="javascript: testform.action ='送信先1';submit();" /> <input type="image" src="ボタン画像2" onClick="javascript: testform.action ='送信先2';submit();" /> </form> ■問題 このやり方だと、 受け取る側も、すべてname="testform"に対応していないとうまくいきません。 ■知りたいこと name="piyo"にしか対応していない送信先もある場合には、 どう書けばよいのでしょうか？ testformのvalue値をpiyoのvalue値に代入するには、 どうすればよいでしょうか？ やりたいことは、 複数送信先に応じて、 <input type="text" name="の値を変えたい、です
- ベストアンサー
- JavaScript
- チェックボックスの表示・非表示 動作
はじめまして。 初めて掲示板を利用させていただきます。javascriptを勉強しまだ日が浅いのでご存知の方がいらっしゃれば教えてください。 今、チェックボックスを選択し選択した項目がアクティブになるようにしたいのですが、選択項目が重複すると以下のようになってしまいました。 A+AB＝AB A+AB+E=ABE 個々までは問題なし。 既に全てのチェックが付いた上体で、ABCE－A＝BCE となってしまい、 ABのチェックが入っていても、Aが消えてしまいます。 以下に現在のコードを張ります。 <script type='text/javascript'> <!-- function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、 テキストボックスを有効化（false）*/ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=''; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無効化（true） */ frm.elements[name+i].disabled=true; } } } //--> </script> <form name='form2' action='#'> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t")' checked>A<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"b");' checked>AとB<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"e");' checked>AとE<br> <input type='checkbox' name='chk2' value='1' onclick='fchk2(this,"c");fchk2(this,"e");' checked>CとE<br> <br> A<input type='text' name='t1' value='テキストA'><br> A<input type='text' name='t2' value='テキストB'><br> A<input type='text' name='t3' value='テキストC'><br> <br> B<input type='text' name='b1' value='テキストA'><br> B<input type='text' name='b2' value='テキストB'><br> B<input type='text' name='b3' value='テキストC'><br> <br> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> <br> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </form> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 子ウィンドウを閉じるとき、親ウィンドウのテキストボックスにカーソルを移動したい。
子ウィンドウを閉じるとき、親ウィンドウのテキストボックスにカーソルを移動したい。（java） <script> function openChild(f){ window.open("child2.htm","_blank"); } </script> <form> <input id="text1"><br /> <input id="text2"><br /> <input type="button" onclick="openChild(this.form)" value="子ウィンドを開く"> </form> 子ウィンドを閉じる <input type="button" onclick="window.close()" value="閉じる"> 親ウィンドウのテキストボックス（id="text2"）にカーソルを移動したいのですが。 <input id="text2"><br />
- ベストアンサー
- JavaScript
- テキストフィールドにもとから値をいれたい
<INPUT SIZE="40" TYPE="text" NAME="名前" VALUE="吉野"><br> 上のテキストフィールドは、もとからテキストフィールドに「吉野」が表示されていますが、 そのエリアをクリックすると、値(吉野)が消えるようなソースをご教授下さい。
- ベストアンサー
- HTML
- 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> でテキストボックスの中身を表示させたいのですが、 上手くいきません。どうすればいいのでしょうか。 また、変数を使わずに直接テキストボックスの中身を 表示させる事はできるのでしょうか。 教えてください。
- ベストアンサー
- その他（インターネット・Webサービス）
- formのtextフィールドが認識されない
下記のようなフォームに対し、JavaScriptで処理を行おうとしています。 <form name="dateForm" method="post" action=""> <table> <tr><td>0</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111001'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>1</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111002'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>2</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111003'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> </table> <input type='text' name='date_0' maxlength='8' size=12 value='20111000'><br><br> <input type="submit" name="button" value="Check" onClick="send_self();"> <input type="submit" name="button" value="Enter" onClick="set_action();"> </form> Checkボタン押下で上記の関数を呼び出し、テキストフィールドdate[0]の値を表示すると、(1)では「20111001」と正しい値が表示されますが、(2)では下記のエラーが出てしまいます。 「プロパティ '0' の値を取得できません: オブジェクトは Null または未定義です。」 また、 alert(document.dateForm.elements[0]); // … (3) alert(document.dateForm.date); // … (4) とすると、(3)では[object]、(4)では[undefined]と表示されます。 alert(document.dateForm.date_0.value); はvalueも正しく表示されobjectとしても正しく認識されるので、配列へのアクセスに問題があるように思うのですが…。 問題点と解決法をご存知の方がいらっしゃいましたら、どうぞよろしくお願い致します。m(＿ ＿；)m
- ベストアンサー
- JavaScript
- ラジオボタンを選択したらテキストに数字入力
ラジオボタンを選択してvalueが1だったら、テキスト欄（Q1_TEXT）に0を入力し、それ以外だったら何もしない、というJavascriptを書きたいです。ラジオボタンによって、テキスト欄の有効化、無効化に関する書き方は見つけられたのですが、このような挙動について見つけることができませんでした。 ご存じの方がおられましたらご教示いただけますと助かります。 よろしくお願いいたします。 <body> <form> <INPUT type="radio" name="Q1" value="1"> <INPUT type="radio" name="Q1" value="2"> <INPUT type="radio" name="Q1" value="3"> <INPUT type="text" name="Q1_TEXT" value="_Q1_TEXT_CHK_" SIZE="7"> </form> </body>
- ベストアンサー
- JavaScript
お礼
ありがとうございますっ なるほど、シングルコーテーションで囲ってあげればそのまま使えるんですね…。 あちこちサンプル見ながらくっつけてやっていたのですが完全に抜けてました。 本当にありがとうございました！