JavaScriptの変数と関数の使い方について
- JavaScriptの変数と関数の使い方について質問があります。変数の宣言を関数の中で行うと正しく動作しますが、関数の外で宣言すると結果がNaNになってしまいます。なぜでしょうか？変数の宣言は関数の外でも行えるのでしょうか？
- JavaScriptの変数と関数の使い方について質問があります。関数の外で変数を宣言すると、結果がNaNとなってしまいます。関数の中で宣言すると正しく動作します。なぜ関数の外で宣言するとNaNになるのでしょうか？
- JavaScriptの変数と関数の使い方について質問があります。関数の外で変数を宣言しても結果がNaNになってしまいます。しかし、関数の中で宣言すると正しく動作します。なぜ関数の外で宣言するとNaNになるのでしょうか？
- ベストアンサー
変数と関数の使い方について質問です。
変数と関数の使い方について質問です。 現在JavaScriptを勉強しています。（超初心者ですのでバカな質問だと思いますがすみません）、変数を宣言して関数の中で使おうとしているのですが、うまく行きません。 以下のように書いて計算をしたいのですが。 <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- var moneyin = document.form1.text1.value; var moneyout = document.form1.text2.value; function zandaka(){ document.form1.text3.value=moneyin-moneyout; } --> </script> <title>簡単計算機</title> </head> <body> <h1>簡単計算機</h1> <hr> <h2>収支計算</h2> <form name="form1"> <p>収入 <input type="text" value="0" class="right" name="text1">円</p> <p>支出 <input type="text" value="0" class="right" name="text2">円</p> <p>残高 <input type="text" value="0" class="right" name="text3" onfocus="zandaka()">円</p> </form> </body> </html> 関数の中に変数の宣言をすればうまく行くのですが、関数の外で変数の宣言をすると結果がNaNになります。 なぜでしょうか？変数は関数の外でまとめてしても良いのではないのでしょうか？？ この考え方自体が間違いでしょうか？ バカな質問だとは思いますが、よろしくお願いいたします。
- makiko3300
- お礼率4% (2/48)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
変数のスコープに関しては、問題ないと思います。 関数の外で宣言された変数は var を付けても、グローバル変数となります。 <script type="text/javascript"><!-- var foo = 'foo'; // 関数の外なので、グローバル変数扱い function test(){ alert(foo); // グローバル変数なので、参照できる } test(); //--></script> 問題は#1さんの仰るように、実行のタイミングですね。 あと、これは後になって出てくる問題ですが、<input> からローカル変数に代入した値も明示的に数値型に変換しないと文字列型として扱います。 Number - MDC https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/Number Javascriptで、以下の様な足し算をする場合、 | OKWave http://okwave.jp/qa/q5896295.html
その他の回答 (2)
- think49
- ベストアンサー率59% (285/482)
#2です。 > あと、これは後になって出てくる問題ですが、<input> からローカル変数に代入した値も明示的に数値型に変換しないと文字列型として扱います。 失礼。 減算だと自動的に数値型に変換されるようです。 加算だと文字列連結になってしまうのですが…。 ただ、どちらにしても明示的に数値型に変換した方が問題は少ないと思います。
- nekohigex
- ベストアンサー率20% (1/5)
2つの誤解があります。 1つはスコープ、もう一つは動作のタイミングです。 ●スコープについて varで宣言された変数はローカル変数になります。 関数の外でローカル変数として宣言された変数は、関数の中で使用することができません。 var moneyin = document.form1.text1.value; ←ローカル変数 var moneyout = document.form1.text2.value; ←ローカル変数 function zandaka(){ document.form1.text3.value=moneyin-moneyout; //↑moneyinとmoneyoutはまだ宣言されていない（NaN)。 // なぜなら、moneyinとmoneyoutは zandaka()の外で宣言されたローカル変数であり、 // zandaka()から参照することができないから。 } 関数の外で宣言された変数を関数の中で使うには、グローバル変数として宣言します。 グローバル変数として宣言するには、varを省略します。 moneyin = document.form1.text1.value; ←varを消す（グローバル変数） moneyout = document.form1.text2.value; ←varを消す（グローバル変数） function zandaka(){ document.form1.text3.value=moneyin-moneyout; //これならNaNにはならない。 //なぜならmoneyin,moneyoutはグローバル変数として宣言されているから。 } ただし、このままでは収入と支出を変更しても、残高は0のままです。これは想定している動作では無いはずです。 原因は動作のタイミングの違いです。 ●動作のタイミング 関数の外に書いてある処理は、そのコードが「読まれた」時に実行されます。 関数内に書かれている処理は、「呼び出された」時に実行されます。 moneyin = document.form1.text1.value; ←ページを読み込んだときに""を設定 moneyout = document.form1.text2.value; ←ページを読み込んだときに""を設定 function zandaka(){ ←「残高」を選択したときに呼び出される document.form1.text3.value=moneyin-moneyout; //収入、支出を変更しても、moneyin,moneyoutは0のまま。 //なぜなら、moneyin,moneyoutはページを読み込んだときに""が設定されたまま、 //更新されていないから。 } 「残高」を選択した際に、その都度収入と支出を読み込む様にするには、 moneyin = document.form1.text1.value; moneyout = document.form1.text2.value; を zandaka(）の中に入れる必要があります。 function zandaka(){ ←「残高」を選択したときに呼び出される moneyin = document.form1.text1.value; ←収入を読み込み moneyout = document.form1.text2.value; ←支出を読み込み document.form1.text3.value=moneyin-moneyout;←計算 } ただ、この場合、moneyin,moneyoutは関数の中で使用されるので、グローバル変数である必要はありません。 なので、varでローカル宣言にしてあげましょう。 function zandaka(){ ←「残高」を選択したときに呼び出される var moneyin = document.form1.text1.value; ←収入を読み込み var moneyout = document.form1.text2.value; ←支出を読み込み document.form1.text3.value=moneyin-moneyout;←計算 }
関連するQ&A
- スタイルがうまく表示できません。
スタイルがうまく表示できません。 関数を作って収入と支出の計算をしているのですが、残高が0より小さい時は赤字で表示。0以上の時は青字で表示しています。 以下がソースなのですが、数字を何度も変更して確認したのですが、うまくいく時と行かない時があります。（マイナスでも青字になったり、マイナスではないのに赤字になったりすることがあります。何度やってもうまく行く時もあります） <html lang="ja"> <head> <script type="text/javascript"> <!-- function zandaka(){ moneyin = document.form1.text1.value; moneyout = document.form1.text2.value; document.form1.text3.value=moneyin-moneyout; if(moneyout>moneyin){ document.form1.text3.style.color="red"; } else{ document.form1.text3.style.color="blue"; } } --> </script> <title>簡単計算機</title> </head> <body> <h1>簡単計算機</h1> <hr> <h2>収支計算</h2> <form name="form1"> <p>収入 <input type="text" value="0" class="right" name="text1">円</p> <p>支出 <input type="text" value="0" class="right" name="text2">円</p> <p>残高 <input type="text" value="0" class="right" name="text3" onfocus="zandaka()">円</p> </form> </body> </html> うまくいかない時と行く時の区別がつかないため原因がわかりません。 初心者なのでつまらないミスだとは思うのですが、原因がわかればお願いします。
- ベストアンサー
- JavaScript
- 計算結果がおかしい
計算結果がおかしい <form name="form1"> <h2>消費税計算</h2> <p>本体金額 <input type="text" value="0" class="right" name="text4">円</p> <p>消費税率 <input type="text" value="0" class="right" name="text5">%</p> <p>税込金額 <input type="text" value="0" class="right" name="text6" onFocus="zei()">円</p> </form> htmlで上記のようなテキストフィールドを3つ作成し、それぞれ上から順に [text4～text6]の名前をつけています。 本体金額（text4）と消費税率（text5）に入力された値をもとに、 text6に税込金額を表示するように以下の関数をjavascriptで<head>タグ間に記述しました。 <script type="text/javascript"> <!-- function zei(){ document.form1.text6.value=document.form1.text4.value*(1+document.form1.text5.value/100); } //--> </script> 実際に値を入力してみると、計算結果が正常な場合とそうでない場合があります。 例えば、本体金額のボックスに500、消費税率の欄に10と入力すると、550と表示され 問題はないのですが、本体金額を200に変更すると 「220.00000000000003」と表示されます。 小数点以下を切り捨てれば済む話ですが・・・・・ 計算結果が違っているのが気になります。 これは何故なのでしょう？ 原因がおわかりの方がおられましたら、ご教示ください。 どうか宜しくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptの計算フォームでカンマ区切り
下記のようなjavascriptの計算フォームで計算結果に３ケタのカンマ区切りと小数点第2位までで切り捨てるようにしたいのですがどのようにすればよろしいでしょうか？ 「javascript カンマ区切り」で検索したサイトをいろいろ見てみたのですが全然わかりません。 どなたかご教授お願い致します。 <head> <script language="JavaScript" type="text/JavaScript"> <!-- function Multiplication(form){ var test = form.ans.value = eval(form.num1.value)*eval(form.num2.value); return false; } --> </script> </head> <p>A×B×C＝合計</p> <div> <form name="multiplication"> <input type="text" size="6" name="num1"> × <input type="text" size="6" name="num2" onBlur="Multiplication(this.form)"> ＝ <input type="text" size="15" name="ans" class="txtbox">円(税別価格) <input type="reset" value="やり直し"> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascript 関数についての質問
javascriptで 入力された日付を元に３０日後、４０日後、６０日後、９０日後の日付を表示したいのですが、 作った関数が１回しか使えませんＴＴ（？）何回も使えるようにしたいです！ 初歩的な質問ですみませんが、どうすればよいでしょうか？ <html> <head> <title>ねこ</title> <script> function Kekka(days){ Yobi = new Array("日","月","火","水","木","金","土"); Date = new Date(document.form.y.value, document.form.m.value -1, document.form.d.value); d = Date.getDate(); Date.setDate(d+days); y = Date.getFullYear(); m = Date.getMonth()+1; d = Date.getDate(); w = Date.getDay(); str1 = y+"年"+m+"月"+d+"日("+Yobi[w]+"曜日)"; //土曜日か日曜日だったら次の月曜の日付もとる if(w == 0){ w = 1; Date.setDate(d+days+1); d = Date.getDate(); } else if(w == 6){ w = 1; Date.setDate(d+days+2); d = Date.getDate(); } str2 = y+"年"+m+"月"+d+"日("+Yobi[w]+"曜日)"; return str1,str2; } function CLR(){ document.form.y.value="";document.form.m.value="";document.form.d.value=""; document.form.v1.value="";document.form.v1_2.value=""; document.form.v2.value="";document.form.v2_2.value=""; document.form.v3.value="";document.form.v3_2.value=""; document.form.v4.value="";document.form.v4_2.value=""; document.form.v5.value="";document.form.v5_2.value=""; } function Test(){ Kekka(30); document.form.v1.value = str1; document.form.v1_2.value = str2; Kekka(40); document.form.v2.value = str1; document.form.v2_2.value = str2; } </script> </head> <body> てすとなう<br><br> <form name="form"> <input type="text" name="y" size="4">年 <input type="text" name="m" size="2">月 <input type="text" name="d" size="2">日 <input type="button" value="start" onclick="Test()"> <input type="button" value="CLR" onclick="CLR()"> <br><br> ３０日後：<input type="text" name="v1" size="27">→<input type="text" name="v1_2" size="27"><br> ４０日後：<input type="text" name="v2" size="27">→<input type="text" name="v2_2" size="27"><br> ６０日後：<input type="text" name="v3" size="27">→<input type="text" name="v3_2" size="27"><br> ９０日後：<input type="text" name="v4" size="27">→<input type="text" name="v4_2" size="27"><br> ３ヶ月後：<input type="text" name="v5" size="27">→<input type="text" name="v5_2" size="27"><br> <br><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- form変数の初期化
<br /><b>Notice</b>: Undefined index: your_name in <b>C:\xampp\htdocs\test\index.php</b> on line <b >83</b><br /> 入力画面で上記のエラーが解決しません。 どうすればいいでしょうか？ 入力画面 <?php $_POST = array(); ?> <form method="post" action="./form_check.php"> <div class="element_wrap"> <label>氏名</label> <input type="text" name="your_name" value="<?php echo $_POST["your_name"]?>"> </div> <div class="element_wrap"> <label>メールアドレス</label> <input type="text" name="email" value=""> </div> <input type="submit" name="btn_confirm" value="入力内容を確認する"> </form> 確認画面 <?php $your_name = $_POST["your_name"]; ?> <form method="post" action="./test.php"> <div class="element_wrap"> <label>氏名</label> <p><?php echo $your_name; ?></p> </div> <div class="element_wrap"> <label>メールアドレス</label> <p><?php echo $_POST['email']; ?></p> </div> <input type="submit" name="btn_submit" value="送信"> </form> <form method="post" action="./index.php"> <!--<input type="button" name="btn_back" onclick="history.back()" value="戻る">--> <input type="submit" name="btn_back" value="戻る"> <input type="hidden" name="your_name" value="<?php echo $_POST['your_name']; ?>"> <input type="hidden" name="email" value="<?php echo $_POST['email']; ?>"> </form>
- 締切済み
- PHP
- JQueryの変数の扱いで弱っています。
お世話になります。 JQuery初心者です。 ３日程、ハマリ、行き詰まったので、相談させて下さい。 アマゾンのレビューの「レビューは参考になりましたか？」「はい」「いいえ」の 様なものを作りかけています。 その際、以下の様な記述をしています。 （肝心な部分抜粋） ---------------------------------------------- 大元 正常に稼働 ---------------------------------------------- <!-- JQuery --> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(){ $("#form1").submit(function() { //●●●この #form1 の部分を変数にしたい var str = $(this).serialize(); 処理 }}; --> </script> </head> <body> <form id="form1" method="post" action=""> //●●●#form1とはコノ部分 <select name="option"> <option value="yes" selected>参考になった</option> <option value="no">参考にならなかった</option> </select> <input type="submit" name="submit" value="投票する"/> </body> </html> ---------------------------------------------- 上記の記述で正常に稼働しています。 が、1つのページにフォームを複数作り、それぞれのフォームにIDをふって、 それぞれ正常に稼働させたいのです。 そこで、javascriptの $("#form1").submit(function() { ここの #form1 部分を変数にして、複数のフォームに対応させたいと思っています。 が！ 以下の様に改良したところ、正常に稼働しません。 ---------------------------------------------- 以下、改良部分 うまく稼働せず ---------------------------------------------- -------javascript部分 $("input").click(function(){ //●●●ここを改良 変数作成 id2= $(this).attr("class"); sharp="#form"; id3 = sharp + id2; }); $("id3").submit(function() { //●●●ここを改良 変数指定 -------フォーム部分 <form id="form1" method="post" action=""> <input type="submit" name="submit" value="投票する" class="1"/> //●●●ここを改良 class="1" を追加 ------------------------------------------------- つまり、classの「1」をjavascript部分で読み取って、#form の文字列と組み合わせて #form1 として、機能させたいのですが、うまくいきません。 （何故か、$("#form"+id2) の部分がうまく機能しません。） ※要は複数のフォームのidに、１つのjavascriptで対応させたいだけで、 上記の様な、まわりくどいやり方には全くこだわっていません。 どうか、迷える子羊に愛の手を！
- ベストアンサー
- AJAX
- 通し番号の変数を一括チェックするには?
JavaScriptでフォームの入力値のチェックを行う プログラムを書いています。 OnSubmitで処理を行っているのですが、チェック対象の テキストボックスが大量に存在しているので、 なんとか効率良く処理できないでしょうか? if( !NumCheck(form.text1.value) || !NumCheck(form.text2.value) || !NumCheck(form.text3.value) || /* ・・・ */ !NumCheck(form.text100.value) ) これをforか何かで回せるとベストなのですが…。 PHPのように文字列を変数名に変換する方法など、 なにか良いアプローチがありましたらご教示願います。 問題の部分抽出したHTMLを下に載せておきます。 そのままでは動きませんが、雰囲気が伝わればと。 インデントがなくてすみません。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> <!-- function submitCheck(form){ if( !NumCheck(form.text1.value) || !NumCheck(form.text2.value) || !NumCheck(form.text3.value) || /* ・・・ */ !NumCheck(form.text100.value) ) { alert('入力エラー'); return false; } return true; } function NumCheck(value){ var tmp = value.match(/[0-9]+/g); if(tmp != value) return false; return true; } //--> </script> </head> <body> <form name="form1" action="test.cgi" target=_self method="post" onSubmit="return submitCheck(this);"> <input type="text" name=text1> <input type="text" name=text2> <input type="text" name=text3> /* ・・・ */ <input type="text" name=text100> </form> </body> </html>
- ベストアンサー
- JavaScript
- 変数の記述について教えてください。
こんにちは。 ご指導のほど、宜しくお願い致します。 javascriptで<form>のname="menu"を変数：formnameに 代入し、実行するように記述をしたいのですが どうもうまくいきません。 誤りの部分を教えて下さい。 <script Language="JavaScript"> <!-- var formname="menu"; // 本登録検索============================================== function itiran_onClick(){ document.+formname+.action" = "itiran.asp"; document.+formname+.submit()"; } ============================================== --> </script> ＜中省略＞ <form action="" method="post" name="menu"> <input type="text" name="TEST" value="1"> <input type="bottun" value="次へ" onclick="itiran_onClick()"> </form>
- ベストアンサー
- JavaScript
- 変数の保持
変数の保持 1.PHP $pst=$_POST; if(is_array($pst)){ foreach($pst as $key => $value) {$$key=$value;global $$key;} } if($action==""){ require_once 'index.html'; } elseif($action=="login2"){ require_once 'top.html'; } elseif($action=="top2"){ require_once 'top2.html'; } **.html <form method="post" action="1.php"> <input type="hidden" name="action" value="login2"> <input type="text" size="10" name="uusid"> <input type="submit" value="submit"> </form> htmlはすべてのページでform記述です。 例として、5ページある場合に、現在のところ、$uusidを5ページ目まで保持できないのですが、どうしたらいいのでしょうか？ もしかして、グローバル関数化は可変変数ではできなかったんでしょうか？ ・1p目：$uusid入力 ・2p目：print($uusid);で確認 ・3p目：<?=$uusid?>を使用するも消えてる
- ベストアンサー
- PHP
- HTML5メールフォームの作り方
お世話になります。HTML5のテンプレートを使用してメールフォームを作成しようとしておりますが、なかなかうまくいきません。action=""にメールアドレスを入れてみましたが、できませんでした。どなたかお分かりの方いらっしゃいましたら、どうかよろしくお願い致します。 <form id="contact" action="contact.html" method="post"> <div class="form_settings"> <p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p> <p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p> <p><span>Message</span><textarea class="contact textarea" rows="5" cols="50" name="your_message"></textarea></p> <p style="padding-top: 15px"><span> </span><input class="submit" type="submit" name="contact_submitted" value="send" /></p> </div> </form>
- ベストアンサー
- HTML
