- ベストアンサー
JavaScriptで収入と支出の計算をする方法
nekohigexの回答
- nekohigex
- ベストアンサー率20% (1/5)
文字列の型の問題です。 JavaScriptは型に対して寛容（いい加減）なので、演算する際は注意が必要です。 if(moneyout>moneyin) を if(parseInt(moneyout)>parseInt(moneyin)) にすれば解決するはずです。 ■説明 moneyin = document.form1.text1.value; moneyout = document.form1.text2.value; この場合、moneyinとmoneyoutの算術演算（+-*/)は数字型として扱われますが、比較演算する際は文字列型として扱われます。 通常の数学では 1<2 10>2 ですが、文字列比較の場合は先頭の文字から比較するため 1<2 10<2 となります。(10は先頭の文字が1なので、2の方が大きいとみなす。） 質問者のソースでは以下の様になることを確認してください。 ・収入1、支出2の場合、赤字の-1になり、 ・収入10、支出2の場合、赤字の8になります。 （本来は青字の8が正しい） そこで、比較する際は型を数字型に強制的に変更（キャスト）します。 キャストの方法は簡単で、整数にするならparseInt(変数)、小数点を使うならparseFloat(変数)とします。
関連するQ&A
- 変数と関数の使い方について質問です。
変数と関数の使い方について質問です。 現在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になります。 なぜでしょうか？変数は関数の外でまとめてしても良いのではないのでしょうか？？ この考え方自体が間違いでしょうか？ バカな質問だとは思いますが、よろしくお願いいたします。
- ベストアンサー
- 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
- ラジオボタンの選択で解答・点数を表示する
10問のテストを作成しています。 (1)選択肢はラジオボタンで3択（正解は10点、その他0点） (2)採点をクリックすると、テキストボックスに○×の結果を出し、もう一つ別のテキストボックスに×の場合は正しし解答を表示 (3)アラートで「あなたの点数は～～点」と出す (4)FORM1.2のSCOREに点数を表示 以上のようにしたいと思い、下記のように作りました。 まだ初心者のため、長々と同じことを書くことしか分からないので、もっと簡単にまとめられる方法がありましたら、教えてください。 よろしくお願いいたします。 function dispscore() { var score=0; if (document.form1.q0[0].checked) { score += 10; document.form1.r0.value = "○"; } else{ document.form1.r0.value = "×"; document.form1.a0.value = "ナイル川"; } if (document.form1.q1[2].checked) { score += 10; document.form1.r1.value = "○"; } else{ document.form1.r1.value = "×"; document.form1.a1.value = "バチカン市国"; } alert("点数は " + score + " 点 です "); document.form1.score.value=score document.form2.score.value=score } ------------------------------------------------------------ <INPUT type=radio name="q1" value="10">ナイル川 <INPUT type=radio name="q1" value="0">ミシシッピー川 <INPUT type=radio name="q1 value="0">アマゾン川> <INPUT size="3" name="r1" type="text"> <INPUT size="25" name="a1" type="text"> <INPUT type=radio name="q2" value="0">バルカン市国 <INPUT type=radio name="q2" value="0">バルタン市国 <INPUT type=radio name="q2" value="10">バチカン市国 <INPUT size="3" name="r2" type="text"> <INPUT size="25" name="a2" type="text">
- ベストアンサー
- JavaScript
- javascriptについて
<script type="text/javascript"> <!-- function df(){ var scr=100; if(document.ad.y.checked){ var sty=document.ad.a; for(var i=0;i<3;i++){ if(sty[i].checked){ scr+=20+10*i; break; } } } document.ad.ad1.value=scr; } --> </script> </head> <body> <form action="#" method="POST" name="ad"> <h4>毎日歯を磨きますか？</h4> <p><input type="checkbox" name="y" value="">はい<br> <input type="checkbox" name="n" value="">いいえ</p> <h4>何回</h4> <p>1回<input type="radio" name="a" value=""><br> 2回<input type="radio" name="a" value=""><br> 3回<input type="radio" name="a" value=""></p> <p>何<input type="text" size="20" name="ad1">点</p> <p><input type="button" value="配点" onClick="df()"> <input type="reset" value="リセット"></p> </form> </body> </html> プログラムとしては成功しているんですが 解らないところが for(var i=0;i<3;i++) のところです。ラジオボタンに添え字を使って計算をしているという プログラムなのでしょうが たとえばlengthではなくあえて数字を入れてるのは 配列ではないからでしょうか？ もう一点 formをつかって button やimage などを使うと 間違いを指摘してもデーターが流れて言ってしまいます。 return falseなど工夫はしてますが データーをtextに入っている文面を消さずに修正させるいい方法はありませんか お願いします。
- ベストアンサー
- 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
- onClickで足し算をして答えを出したい
過去に同じような質問もありましたが、いろいろ検索してこちらの過去ログを拝見しても解決できなかったので質問させてください。 onClickで計算を始めて答えを<input type="text" name="t3">に表示したいのですが、エラーが出てしまいます。いろいろ試したのですが理由がわかりません。 ちなみにソースが以下です。 <html> <head> <title>計算</title> <SCRIPT language="JavaScript"> <!-- function keisan(){ document.f1.t3.value=parseInt(document.f1.t1.value)+parseInt(document.f1.t2.value); } //--> </SCRIPT> </head> <body> <center> <table border="1" width="700" height="200"> <from name="f1"> <tr> <td width="150">右側 <input type="text" name="t1" > </td> <td width="250"> <input type="radio" name="kei" value="+">＋ 左側<br> <input type="radio" name="kei" value="-">－ <input type="text" name="t2"><br> </td> <td width="150">c<br><input type="button" name="iri" value=" ＝ " onClick="keisan()"></td> <td width="150"> 答え<br> <input type="text" name="t3"></td> <tr> </form> </table> </center> </body> </html> おわかりの方がいましたらどうかご教授お願いします。
- ベストアンサー
- JavaScript
- 同じFunctionで、同じ計算させたいのですが
私は今、以下のようにここで教えていただいたプログラムを参考に組んでは見たものの、同じ行をいくつもコピペすると計算されなくなってしまいます。1行だけの計算でしようとするとうまく計算されるのですが・・・ <HTML> <HEAD> <TITLE> タイトルバーに表示されるテキスト </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--JavaScript function SUM(){ if(!isNaN(document.sum.text1.value) && !isNaN(document.sum.text2.value) && !isNaN(document.sum.text3.value) && document.sum.text1.value && document.sum.text2.value && document.sum.text3.value){ document.sum.text4.value = eval(document.sum.text1.value) + eval(document.sum.text2.value) - eval(document.sum.text3.value) } if( !isNaN(document.sum.text5.value) && !isNaN(document.sum.text6.value) && document.sum.text5.value && document.sum.text6.value){ document.sum.text7.value = eval(document.sum.text4.value) + eval(document.sum.text5.value) + eval(document.sum.tex6.value) } } //--> </SCRIPT> </HEAD> <BODY> <FORM NAME="sum" onSubmit="SUM();return false;"> A<INPUT TYPE="text" NAME="text1" onChange="SUM()" SIZE="10"><BR> B<INPUT TYPE="text" NAME="text2" onChange="SUM()" SIZE="10"><BR> C<INPUT TYPE="text" NAME="text3" onChange="SUM()" SIZE="10"><BR> D=A+B-C<INPUT TYPE="text" NAME="text4" onChange="SUM()" SIZE="10"><BR> E<INPUT TYPE="text" NAME="text5" onChange="SUM()" SIZE="10"><BR> F<INPUT TYPE="text" NAME="text6" onChange="SUM()" SIZE="10"><BR> G=D+E+F<INPUT TYPE="text" NAME="text7" onChange="SUM()" SIZE="10"><BR> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 複数の入力項目を１つの「NAME="●●"」にまとめたい
http://oshiete1.goo.ne.jp/kotaeru.php3?q=169697 ↑この質問と全く同じことがやりたいのですが、うまくいきません。 この質問をされた方はついた回答の文章だけでうまくいったようですが、わたしは試行錯誤したのですが、ダメでした。。 下が試行錯誤の結果です。もちろん動作しません。(^-^; どこが間違っているのか、ぜんぜん見当違いのことをしてしまっているのか、どなたかわかる方ご教授ください。 また、上のアドレスの回答の方がおっしゃるのは具体的にどう記述すればよいのか、ずばり正解も教えていただけると大変助かります。 よろしくお願いしたします。 <SCRIPT type="text/javascript" language=JavaScript> <!-- function hizuke(){ h1 = document.form1.hi1.value; h2 = document.form1.hi2.value; h3 = document.form1.hi3.value; document.form1.hizuke.value = h1 + h2 + h3; } // --> </SCRIPT> -------------------------------------------- <form action="http://~.cgi" method="post" onSubmit="hizuke()" name="form1"> <input type="hidden" name="hizuke"> <input type="text" name="hi1" size="" value=""> <input type="text" name="hi2" size="" value=""> <input type="text" name="hi3" size="" value=""> <input type="submit" value="送信"> </form>
- ベストアンサー
- JavaScript
- 複数のvalue値を返すには
Ａを選択した時10、Ｂを選択した時100、Ｃなら1000と <input type="text" name="TEXT" value="">に表示されるように以下のようなjavascriptを記述しましたが、 Ａの時10と20を、Ｂの時100と200、Ｃの時1000と2000が もうひとつの<input type="text" name="TEXT2" value="">に表示できるようにするにはどうしたらよいのでしょうか。 記述方法を教えていただければ一番いいのですが、サンプルがあるページでもいいので、教えてください。 <script type="text/javascript"> <!-- function kai(){ document.FORM.TEXT.value = document.FORM.num.value; } //--> </script> </head> <body> <form name="FORM"> <input type="text" name="TEXT" value=""> <select name="num" onChange="kai()"> <option value="10">Ａ</option> <option value="100">Ｂ</option> <option value="1000">Ｃ</option> </select> </form>
- ベストアンサー
- JavaScript
- ブログフォームが表示されない！
いつも大変お世話になり誠にありがとうございます。 標記の件。 下記ソースコードで名前がform.phpです。 ブログフォームが表示されません。 どうすれば表示されるでしょうか？ ご回答のほど宜しくお願い申し上げます。 <body> <div class="v_line_fix"> <h1>Blog K・T</h1> <h2><a href="index.html">トップページ</a></h2> <h2>ブログフォーム</h2> <form action="blog_create.php" method=_POST> <p> ペンネーム: <input type="text" name="name" value=""></p> <p> タイトル: <input type="text" name="name" value=""></p> <p> カテゴリー: <input type="text" name="name" value=""></p> <p>ブログ本文: <textarea name="content" id="content" cols="50" rows="80"></textarea><br> <input type="submit" value="確認画面へ"> </form> </body>
- ベストアンサー
- PHP