JavaScript初心者の質問：テキストボックスの値が消えてしまう
- JavaScriptを勉強し始めていますが、テキストボックスに値を計算して表示しようとすると、一瞬表示された後すぐに消えてしまいます。
- この問題は、IE8とFirefoxの環境で発生しています。
- ボタンをクリックすると、テキストボックスの値がアドレスに反映され、ページが切り替わるため値が消えてしまいます。
- ベストアンサー
出力した文字が消えてしまう(初心者)
JavaScriptを勉強し始めて、基本的なコードだと思いますが、行き詰っています。すみませんが、教えて下さい。 期待：数値を計算してテキストボックスに残す 問題：一瞬テキストボックスに出るが、すぐに消えてしまう 環境：IE8,Firefox [ コード ] <HEAD> <SCRIPT language="JavaScript"> <!-- var total = 0; function keisan(){ total = parseInt(document.frmMain.price.value) + 700; document.frmMain.total.value = total; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="frmMain"> <INPUT type="text" name="price" size="7">円<BR> <BUTTON onClick="keisan()">計算</BUTTON><BR> <BR> 合計：<INPUT type="text" name="total">円<BR> </FORM> </BODY> ボタンをクリックすると、アドレスにテキストボックスで入力したデータが入りページが切り替わってしまいテキストボックスが空になってしまいます。 アドレスには ～/Sample1_1.html?price=32&total=732 のようになります。よろしくお願いします。
- paperbasic
- お礼率85% (12/14)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON button要素のtype属性のデフォルト値が"submit"であるからで、 type属性に"button"等を指定すれば残ります。 #input要素を使ってtype属性を"button"にするのと、button要素を使うのとどっちがいいんだろう。
関連するQ&A
- 現在のカーソル行を知りたい。
'KeyDown'の下記サンプルコードでfunction msgにきたときに 何番目のテキストボックスでKYyDownされたか知りたいのですが、 関数があればお教え下さい。 <html> <head> <script type="text/Javascript"> <!-- function msg(str) { alert("check"); } //--> </script> </head> <body onKeyDown="msg('KeyDown')"> key<br> <form name="myForm" method="POST" target="_self"> <input type="text" name="text1><BR> <input type="text" name="text1"><BR> <input type="text" name="text1"><br> <input type="submit" name="button1" value="button"> </form> </body> </html>
- ベストアンサー
- JavaScript
- 超初心者です。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> に変えたいと思っています。 自分の頭ではいろいろやってもうまくいきませんでした。 どなたか御教授を宜しくお願い致します。
- ベストアンサー
- JavaScript
- フォームに表示される文字をセンタリングさせたい。
Javascriptの初心者です。宜しくお願いします。 テキストエリアが2つあったとします。 1のテキストエリアにある値を入力してボタンを押すと、 2のテキストエリアに1で入力した値をそのまま表示させ、 尚且つ表示された値をフォーム内でセンタリングさせたいのですが どうすればよいのかわかりません・・・。 ご存知の方がいらっしゃいましたら教えて下さい。 どうぞ宜しくお願い致します。 <html> <head> <script language="JavaScript"> <!-- function my1() { a=document.form1.text1.value; document.form1.text2.value=a; } //--> </script> </head> <body> <form name="form1"> <input type="texterea" name="text1"> <input type="texterea" name="text2"> <input type="button" value="CLICK!" onClick="my1()"> </form> </body> </html>
- 締切済み
- JavaScript
- javascript初心者です。
javascript初心者です。 下記のソースコードで、単純に、マウスホーバーで、テキストの内容を切り替えるものですが、 IE8ですと動作しますが、Firefox3.5だと動作しません。 なにか、原因あるのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script language="javascript" type="text/javascript"> function formcalc(formobj){ var val_a= formobj.elements["para_a"].value; var val_b= formobj.elements["para_b"].value formobj.elements["answer"].value = val_a * val_b } function chktext(){ var obj = document.getElementById("id1"); obj.innerText="テキスト変更しました。"; } </script> </head> <body> <form> <input size="10" type="text" name="para_a" value="0" />× <input size="10" type="text" name="para_b" value="0" />= <input size="10" type="text" name="answer" /><br /> <input type="button" name="keisan" value="計算" onclick="formcalc(this.form)" /> </form> <br /><br /><br /><br /> <p id="id1" onMouseOver="this.innerText='受付終了'">最初のテキスト</p> </body> </html>
- ベストアンサー
- JavaScript
- javascriptの記述方法について
こんにちわ。 今、以下のような記述で、kei1～kei5までの合計をtotalに出そうと考えましたが、 function allcalc(){}内に書く記述で困っています。 form名を分けているのは、別の関数で各行の小計（kei1～5）を出すために分けてみましたが、あまり意味がなさそうで一つのform名に変更しようかとも思っています。 <HTML> <HEAD> <TITLE>Test</TITLE> <SCRIPT type="text/javascript"> <!-- function allcalc(total){ var al_total = 0; for (i=1; i <= 10; i++){ elementkei="total.form[" + i +"].element[2].value" if(elementkei != "") {al_total += elementkei} } document.form6.total.value = al_total; } //--> </SCRIPT> </HEAD><BODY><TABLE><FORM name="form1"> <TR><TD><INPUT type="text" name="baika1"></TD> <TD><INPUT type="text" name="suryou1"></TD> <TD><INPUT type="text" name="kei1"></TD> </FORM> <FORM name="form2"> <TR><TD><INPUT type="text" name="baika2"></TD> <TD><INPUT type="text" name="suryou2"></TD> <TD><INPUT type="text" name="kei2"></TD> </FORM> ・・・・・・・・・・・・・これが5つあります <FORM name="form6"> <TR><TD>合計</TD> <TD><INPUT type="text" name="total"> <TD><INPUT type="button" name="go" value="合計計算" OnClick="allcalc(document)"></TD> </FORM></TABLE></BODY></HTML> これを動作させてみると、「total.form[がNullかオブジェクトではありません」とエラーが流れます。 恐らく、allcalcの引数とその参照の仕方が悪いと思うのですが、 書き方を変えてみても、同じようなエラーで止まってしまいます。 どなたか方法を教えていただけないでしょうか。
- ベストアンサー
- JavaScript
- ブラウザ上のテキストボックスから数値を受け取って別のテキストボックスに計算結果を返す
超初心者です。 Cの勉強をしていたのですが、javascriptにも手を出してみました。 変数の考え方が違うせいか、理解が間違っているのか・・・ ブラウザ上でテキストボックスに数値を記入して、別なテキストボックスに計算結果を返すソースを考えていました。 以下のような感じです。 HTML ------------------------ <form> 林檎 100円 * <input type=text name=txt7>個 <input type=button value="計算" onClick="func4(txt7)"><br> 合計金額は<input type=text name=txt8>円になります。 </form> ------------------------- JS ------------------------ function func4(keisan){ document.form2.txt8.value=keisan*100; } ------------------------ 上記のように変数を使うとエラーになります。「NaN」が返ってきます。 変数を使用せずに、直接受け取る値を計算すれば出来たのですが・・・ ブラウザからなにかを入力させ、それを変数に代入した場合は数値（INT）型にはならないのでしょうか？？ 詳しい方、解説をお願いします・・・
- ベストアンサー
- JavaScript
- 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サービス）
- Netscapeだと文字化け！
まずは下記のHTMLをご覧下さい。 <html> <head> <title>tes</title> </head> <SCRIPT LANGUAGE=JAVAScript> <!-- function cp_text( ) { document.fr_test.right.value = document.fr_test.left.value ; } function cp_text1( ) { document.fr_test.right.value = escape(document.fr_test.left.value) ; } function cp_text2( ) { var n = unescape(document.fr_test.right.value) ; document.fr_test.right.value = n; } //--> </SCRIPT> <body> <form name="fr_test"> テキスト１ <input type="text" name="left" size="10" maxlength="10"><BR> テキスト２ <input type="text" name="right" size="10" maxlength="10"><BR><BR> <input type="button" name="btn_tes" value="コピー開始" onclick="cp_text()"><BR> <input type="button" name="btn_bin" value="ﾃｷｽﾄ2をHEX変換" onclick="cp_text1()"> <input type="button" name="btn_bin" value="ﾃｷｽﾄ2をDEC変換" onclick="cp_text2()"> </form> </body> </html> ------------------------------------------------ 以上のように記述されたHTMLがあります。 これをNetscapeで起動させるとﾃｷｽﾄﾎﾞｯｸｽが２つ表示されます。 ここで「テキスト１」の方に(1)、(2)みたいなコード(ローマ字でしょうか？） これを入力させて下にある「コピー開始」ボタンを押すと テキスト２の方へ値がコピーされてしまうのですが、 ローマ字文字が文字化けしてしまいます。 これをＩＥで起動すると文字化けはおきないのですが。 これをNetscape上で文字化けを起こさずにコピーすることは できないのでしょうか？
- ベストアンサー
- HTML
- セレクトボックスを使った計算式
テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、３つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか？ とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript"> <!-- function keisan(){ if(option value="＋"){ document.f1.t3.value(document.f1.t1.value + document.f1.t2.value); } } //--> </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- 教えてください！
今、下記のような感じのソースでグラフのようなものをつくっていますが、A～Cのテキストボックスにそれぞれ数字を入力したら、その入力した数字の数だけ”☆”を表示させようとしたのですが、うまく表示されません。一つのテキストボックスだけだとうまく表示されるのですが、複数になると失敗してしまいます。ループの使い方も良くわかっていないのだと思うのですが、、表示させる方法を教えていただきたいです、お願いします。 <html> <head> <title></title> <script language="JavaScript"> <!-- function mkgrph(max){ var col; for( col =1; col <= max; col++){ document.write("☆彡"); } } //--> </script> </head> <body> <form name="form1"> <center> 数字を入力<br> A:<INPUT type="text" size="5" name="txt1"><br> B:<INPUT type="text" size="5" name="txt2"><br> C:<INPUT type="text" size="5" name="txt3"><p> <INPUT type="button" value=" グラフ " onClick="mkgrph()"> </center> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
himajin100000様 ありがとうございました。 思い通りの動作になりました。