• ベストアンサー

テキストフィールドへの値の表示

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>

  • ny_cs
  • お礼率53% (17/32)

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

  • ベストアンサー
回答No.3

document.input_fah.c; この書き方は<form name="input_fah">の中の<input name="c">に有効です。 ＊<form>にname属性を使っていないときは、この書き方はできません document.getElementById('c') この書き方は<input id="c">に有効です。 ＊formタグ関係なし document.getElementsByName('c') この書き方は<input name="c">に有効で、これは配列になります。 （厳密には配列ではありませんが、配列と同じようにdocument.getElementsByName('c')[0]でアクセスできます。） ＊formタグ関係なし <form>のname属性は<input name="name">と重複してしまうため、非推奨となっています。 かわりに、 <body>の中の<form>の順番で、document.forms[0].cという書き方をしたり、 <form id="input_fah"><input name="c"> idを付けておくと、document.forms['input_fah'].cという書き方が使えます。 いろんなパターンを書くと混乱されるかもしれませんが、、、教科書の説明って、どこまで書かれてるんでしょうか。。。 いずれにしても、どれかに統一しておくと、あとで読みやすいと思います。 あと、/* コメント */ の書き方が間違ってます。 //return cel; /* document.input_cel.f.value=fah_to_cel( ) */ やろうとしてることは間違ってはいないと思いますが、この方法でやるにはちょっと難しいかな、と思います。

ny_cs
質問者

お礼

いろいろなサイトをみて、サンプルコードをつぎはぎで利用した結果、こんなになってしまいました。 idなのかnameなのか、意識する必要があることを認識しました。ありがとうございます。とても参考になりました。

その他の回答 (2)

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.2

scriptの書き方がおかしい気がするんだけど？(主にbody内) http://www.tohoho-web.com/js/write.htm http://www.tohoho-web.com/js/index.htm

ny_cs
質問者

お礼

ありがとうございました。参考になりました。

  • mo_gu
  • ベストアンサー率51% (56/109)
回答No.1

document.input_fah.c.value document.input_cel.f.value これを document.getElementById("c").value document.getElementById("f").value に変更してみてください。

ny_cs
質問者

お礼

ありがとうございました。参考になりました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Javascriptでフィールドを埋める方法

    Javascript初心者です。 HTML <input type="text" id="hoge" value="piyo"> <input type="checkbox" onclick="AutoFill();" > <input type="text" id="foo" value=""> Javascriptでcheckboxをクリックすると、fooというidを持つテキストフィールドの値をhogeというidを持つテキストフィールドと同じ値で埋めたいと思います。 bodyの終りに <script> AutoFill(){ document.elementGetById(foo).value=document.elementGetById(hoge).value; } </script> checkboxをクリックしても何も起こらない。どうすればいいんですか。 ご回答をよろしくお願いいたします。

  • テキストボックスを無効にすると値が取得できない

    javascriptでこのようにテキストボックスを無効に してフォームを送信するとphp側でvalueの値が取得できないのですが、入力無効にすると valueは送られないんでしょうか？ <form> <input type="text" id="sample" name="sample" value="値" /> </form> スクリプト .document.getElementById('sample').disabled = true; valueにはphpで値をセットし、それをテキストボックスで編集できないようにして 値を飛ばそうとしたのですがテキストボックスのvalueの値が来てないようです。 自分なりに考えたんですが、送信する瞬間だけ（submitボタンが押された時） テキストボックスを有効に戻すようにコードを書いているのですが これ以外で何かありますか？ ---このように対処--- <form onsubmit="return disb()"> <input type="text" name="sample" value="値" /> </form> スクリプト document.getElementById('sample').disabled = true; function disb(f){ f.sample.disabled = false; }

  • 計算結果のテキスト表示

    JavaScript計算式で結果を表示したいのですが できません。 テキストBOXには結果を入れれるのですが、 テキストBOXでなく文字として結果を出したいのですが でません。 以下ソースです。　19行目が表示希望箇所です。 <SCRIPT language="javascript"> <!-- function calc() { with(document.f) { syoukei.value = goods1.value * goods2.value * (goods3.value * 0.01) ; syoukei.value = Math.round(syoukei.value) } } // --> </SCRIPT> <FORM name="f"> 縦<INPUT type="text" name="goods1" size="3" onChange="calc();">m * 横<INPUT type="text" name="goods2" size="3" onChange="calc();">m * 厚み<INPUT type="text" name="goods3" size="3" onChange="calc();">cm<BR> 　　　　　　60L　<INPUT type="text" name="syoukei" size="5">袋<BR> <SCRIPT language="javascript"> <!-- document.write(syoukei); } // --> </SCRIPT> </FORM>

  • 特定のラジオボタンが選択されたらテキストフィールドを入力可

    下のような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で取得した値をテキストボックスに・・・

    IE5.5です。 javascriptで取得した値をテキストボックスに格納したいのですが、 うまくいきません。 <SCRIPT language="javascript"> var varVal=true </script> <form> document.write("<input type='hidden' name='myVal' vaue="+varVal+">"); </form> javascriptが初心者でよくわからないのですが、 例えば <input type="hidden" name="myVal" value=varValに格納された値> といった書き方もできるのでしょうか？ よろしくご教授願います。

  • テキストボックスの値で配列の値を求めるには?

    やりたいと思っているのは、 (1) "INPUT" の値を入力。 (2) "koteichi" は他からの参照値。 (3) "goukei"に(1)と(2)の合計値。 (4) "total" に(3)の値に該当する配列の値。 (実際には配列の値を代入した式の答え。) という流れになります。 (3)まではなんとか分かるのですが、 (4)はどのように配列の値を代入すればいいのかが 分かりません。 　なにぶん最近始めた初心者なので不規則な値は配列を使えばいいと解釈したのですが、まったく使い方を間違えているのでしょうか? こういった場合は別のやり方があるのでしょうか? どなたかよろしくお願いします。 <SCRIPT language=JavaScript1.1> <!-- rank = new Array(6); rank[0]=0; rank[1]=5;[rank2]=8;[rank3]=12;rank[4]=16;rank[5]=22; function calc(){ document.myform.goukei.innerText = eval(document.myform.INPUT.value) +eval(document.myform.koteichi.value); } // --> </SCRIPT> </HEAD> <BODY> <form name="myform"> <INPUT size="20" type="text" name="INPUT" value="0" onchange="calc()"/>+<INPUT size="20" type="text" name="koteichi" value="10">=<INPUT size="20" type="text" name="goukei" value="0"> <INPUT size="20" type="text" name="total" value="0"> </FORM> </BODY>

  • 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もありましたらお教え頂きたく思います。

  • HTMLでテキスト入力し表示させる

    HTMLでテキストボックスに文字を入力し、表示させたいのですがうまくできません。 見た目はできているようなのですが、文字が表示されない状態です。 コードを記載しますので、お手数をお掛けしますがご教授頂けますでしょうか。 <html> <head> <script> function add(){ document.getElementById("target").innerText = document.getElementById("name").value; target = document.getElementById("output"); document.write(target); } </script> </head> <body> <p>名前を入力してください</p> <input id="name" name="name" type="text" size="30" onkeydown="update_field();"> <br> <input type="button" onclick="add()" value="実行"> <form action="index.html" method="post"> <br> <input type="submit" name="exit" value="戻る"> </form> </body> </html>

  • JavaScriptでテキストを表示・非表示・・・

    こんばんは。お世話になります。 JavaScriptでテキストがボタンを押すと表示/非表示と切り替わるようにしたいです。 サイトを参考に試してみましたが一か所しか表示/非表示となりませんでした。 1行おきに表示/非表示としたいのでブロック単位では指定出来ません。 display構文を使って作りました。 div idがそれぞれの部分に必要かと思い、div id="○○a"、div id="○○b"という風に付けましたがうまくいきませんでした。 　　　↓このような形にしたいです 　あいうえおかきくけこ　 　サシスセソタチツテト　←この行を表示/非表示 　なにぬねのはひふへほ　 　マミムメモヤユヨ　←この行を表示/非表示 こういう風なように打ちました。 あいうえおかきくけこ<br> <div id="disp">サシスセソタチツテト</div><br> 　　　　　　　 なにぬねのはひふへほ<br>　 <div id="disp">マミムメモヤユヨ</div><br> <form> <input type="button" value="表示" onclick="Hyoji1(0)"> <input type="button" value="非表示" onclick="Hyoji1(1)"> </form> <script type="text/javascript"> <!-- function Hyoji1(num) { if (num == 0) { document.getElementById("disp").style.display="block"; } else { document.getElementById("disp").style.display="none"; } } // --> </script> どの辺りを間違っているでしょうか?宜しくお願い致します。

  • form につけた id 値の取得方法

    form 内に id という名前の input 要素があると、form につけた id 値が取得できません。firefox で確認しましたが、例の f2.id が input 要素になります。このような場合 form の id 値はどのようにすれば取得できるでしょうか。 <!doctype html> <html> <head><title>id test</title></head> <body> <form id="f1" name="f1"> <input type="hidden" name="idx"> </form> <form id="f2" name="f2"> <input type="hidden" name="id"> </form> <script type="text/javascript"> var f1 = document.getElementById('f1'); var f2 = document.getElementById('f2'); alert("f1.name: " + f1.name + ", f1.id: " + f1.id + "\nf2.name: " + f2.name + ", f2.id: " + f2.id); </script> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する