JavaScriptで収入と支出の計算をする方法

このQ&Aのポイント
  • JavaScriptを使用して、収入と支出の計算を行い、残高を表示する簡単な計算機を作成する方法を説明します。
  • 残高が0より小さい場合は赤色で表示し、0以上の場合は青色で表示するように設定します。
  • 計算機がうまく動かない場合は、マイナスやプラスの値の入力や演算の順序の確認を行うことが重要です。
回答を見る
  • ベストアンサー

スタイルがうまく表示できません。

スタイルがうまく表示できません。 関数を作って収入と支出の計算をしているのですが、残高が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>収入&nbsp;<input type="text" value="0" class="right" name="text1">円</p> <p>支出&nbsp;<input type="text" value="0" class="right" name="text2">円</p> <p>残高&nbsp;<input type="text" value="0" class="right" name="text3" onfocus="zandaka()">円</p> </form> </body> </html> うまくいかない時と行く時の区別がつかないため原因がわかりません。 初心者なのでつまらないミスだとは思うのですが、原因がわかればお願いします。

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

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.4

#2です。 誤解を与える説明だったので、補足します。 parseInt() はいくつか注意点があり、私が所持している参考書『JavaScript: The Good Parts』でもP120で解説されています。 parseInt() は「数値型変換を行う関数」ではなく、「指定された基数の整数値に変換を行う関数」です。 第一引数に与えられた文字列を第二引数で与えられた基数の整数値に変換します。 第二引数が省略された場合、先頭に 0 を持つ数値文字列を第一引数に与えられると8進数に基数変換します。 なので、10進数に変換したい場合は、第二引数で 10 を指定した方が無難です。(これは『JavaScript: The Good Parts』でも推奨されています) var a = "010"; alert(parseInt(a)); // 8 (第二引数で基数値を指定しない場合、parseInt() は0で始まる数値を8進数として扱う) alert(parseInt(a, 10)); // 10 (第2引数に10を指定すれば、常に10進数として扱う) parseInt() は一番目の文字が数に変換できない場合、NaN を返します。(MDCより) var b = ""; // 空文字 alert(parseInt(b)); // NaN alert(parseInt(b, 10)); // NaN 一方、Number() は指定された値を「数値型に変換する関数」です。 parseInt() と同じく数値型に変換できない場合に NaN を返しますが、parseInt() より幅広い型変換が可能です。 var a = "010"; var b = ""; // 空文字 var c = null; // null型 var d = NaN; // NaN型 var e = void(0); // undefined型 alert(Number(a)); // 10 alert(Number(b)); // 0 alert(Number(c)); // 0 alert(Number(d)); // NaN alert(Number(e)); // NaN ですので、もしWeb制作者が指定された値を数値型に変換したいのなら、Number() を使用した方が良い、と私は思います。 実際、下記コードは "NaN" を残高に格納します。(全角空白は半角空白に置換してください) <form>  <p>収入&nbsp;<input type="text" value="" class="right" name="text1">円</p>  <p>支出&nbsp;<input type="text" value="" class="right" name="text2">円</p>  <p>残高&nbsp;<input type="text" value="" class="right" name="text3" id="text3" onfocus="zandaka(event);">円</p> </form> <script type="text/javascript"><!-- (function (){  var target = document.getElementById('text3');  var form = target.form;  target.value = parseInt(form.elements['text1'].value, 10) + parseInt(form.elements['text2'].value, 10);  alert(iframeElement); // iframe#hoge を参照する })(); //--></script> 勿論、"NaN" を返す場合は例外処理でエラーを返してもいいのですが、その場合は複雑な処理が必要です。 どちらにせよ、parseInt() は Number() で数値型に変換された値を基数変換する関数だと思います。 parseInt - MDC https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Functions/parseInt Number - MDC https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/Number

その他の回答 (4)

  • think49
  • ベストアンサー率59% (285/482)
回答No.5

#2,4です。 #4に一部ミスがありました。 ----  alert(iframeElement); // iframe#hoge を参照する ---- これは別のテストコードの名残で本件とは無関係です。ごめんなさい。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

回答読んでも解らないですか? とりあえず、 if(moneyout>moneyin){  document.form1.text3.style.color="red"; } else{  document.form1.text3.style.color="blue"; } を if(parseInt(document.form1.text3.value)>=0){   document.form1.text3.style.color="blue"; }else{   document.form1.text3.style.color="red";  } にしてみなされ(もち全角空白は半角空白にして)

  • think49
  • ベストアンサー率59% (285/482)
回答No.2

前質問の回答を読んで下さい。 ■前回の質問(http://okwave.jp/qa/q5932254.html)より ---------------------------------------------- あと、これは後になって出てくる問題ですが、<input> からローカル変数に代入した値も明示的に数値型に変換しないと文字列型として扱います。 Number - MDC https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/Number Javascriptで、以下の様な足し算をする場合、 | OKWave http://okwave.jp/qa/q5896295.html ---------------------------------------------- ■parseInt() の仕様 ---------------------------------------------- 基数が指定されなかったり、0 が指定された場合、JavaScript は以下のように解釈します。: ・入力 string が "0x" で始まっている場合、基数は 16(16 進表記)になります。 ・入力 string が "0" で始まっている場合、基数は 8 (8 進表記)になります。この機能は、非推奨です。 ・入力 string が他の値で始まっている場合、基数は、10(10進表記)になります。 一番目の文字が数に変換できない場合、parseInt は、NaN を返します。 https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Functions/parseInt ---------------------------------------------- ■検証用コード ------------ var a = ""; var b = 3; var c = "05" var d = null; var num1 = Number(a) - Number(b) + Number(c) + Number(d); var int1 = parseInt(a) - parseInt(b) + parseInt(c) + parseInt(d); var int1 = parseInt(a) - parseInt(b) + parseInt(c) + parseInt(d); var int2 = parseInt(a, 10) - parseInt(b, 10) + parseInt(c, 10) + parseInt(d, 10); alert(num1); // 2 alert(int1); // NaN alert(int2); // NaN ------------

回答No.1

文字列の型の問題です。 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>収入&nbsp;<input type="text" value="0" class="right" name="text1">円</p> <p>支出&nbsp;<input type="text" value="0" class="right" name="text2">円</p> <p>残高&nbsp;<input type="text" value="0" class="right" name="text3" onfocus="zandaka()">円</p> </form> </body> </html> 関数の中に変数の宣言をすればうまく行くのですが、関数の外で変数の宣言をすると結果がNaNになります。 なぜでしょうか?変数は関数の外でまとめてしても良いのではないのでしょうか?? この考え方自体が間違いでしょうか? バカな質問だとは思いますが、よろしくお願いいたします。

  • 計算結果がおかしい

    計算結果がおかしい <form name="form1"> <h2>消費税計算</h2> <p>本体金額&nbsp;<input type="text" value="0" class="right" name="text4">円</p> <p>消費税率&nbsp;<input type="text" value="0" class="right" name="text5">%</p> <p>税込金額&nbsp;<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」と表示されます。 小数点以下を切り捨てれば済む話ですが・・・・・ 計算結果が違っているのが気になります。 これは何故なのでしょう? 原因がおわかりの方がおられましたら、ご教示ください。 どうか宜しくお願いいたします。

  • ラジオボタンの選択で解答・点数を表示する

    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について

    <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()">&nbsp;<input type="reset" value="リセット"></p> </form> </body> </html> プログラムとしては成功しているんですが 解らないところが for(var i=0;i<3;i++) のところです。ラジオボタンに添え字を使って計算をしているという プログラムなのでしょうが たとえばlengthではなくあえて数字を入れてるのは 配列ではないからでしょうか? もう一点 formをつかって button やimage などを使うと 間違いを指摘してもデーターが流れて言ってしまいます。 return falseなど工夫はしてますが データーをtextに入っている文面を消さずに修正させるいい方法はありませんか お願いします。

  • フォームに表示される文字をセンタリングさせたい。

    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>

  • 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="+">+&nbsp;&nbsp;左側<br> <input type="radio" name="kei" value="-">-&nbsp;&nbsp;<input type="text" name="t2"><br> </td> <td width="150">c<br><input type="button" name="iri" value="&nbsp;&nbsp;=&nbsp;&nbsp;" onClick="keisan()"></td> <td width="150"> 答え<br> <input type="text" name="t3"></td> <tr> </form> </table> </center> </body> </html> おわかりの方がいましたらどうかご教授お願いします。

  • 同じ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>

  • 複数の入力項目を1つの「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>

  • 複数のvalue値を返すには

    Aを選択した時10、Bを選択した時100、Cなら1000と <input type="text" name="TEXT" value="">に表示されるように以下のようなjavascriptを記述しましたが、 Aの時10と20を、Bの時100と200、Cの時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">A</option> <option value="100">B</option> <option value="1000">C</option> </select> </form>

  • ブログフォームが表示されない!

    いつも大変お世話になり誠にありがとうございます。 標記の件。 下記ソースコードで名前が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