JavaScriptの演算について

このQ&Aのポイント
  • JavaScriptを使用して電線の長さに応じて金額を計算するプログラムを作成していますが、計算結果が正しくない問題が発生しています。
  • 改善点を教えていただきたいです。また、IEとネスケでの動作も確認したいです。
  • プログラムの誤差の問題と思われますが、修正方法がわからない状況です。
回答を見る
  • ベストアンサー

JavaScriptの演算について

計算のプログラムで HP上で電線の長さに応じて金額を出したくて [ meter ] m [ centi ] cm   ↑      ↑ テキストボックス↑          コンボボックス          値は0から90まで10おき  [ nedan ]←ここに金額が自動で計算される (電線は1mあたり40円) このようなものをJavaScriptで作っているのですが、計算が全然違う値になってしまいます。 このサイトで調べてると誤差の問題かなと思ったのですが直し方がまったくわかりません。 プログラムの改善点などあれば教えていただけませんか??できればIEとネスケで動作させたいです。 作ったプログラムはこんな感じです。 <SCRIPT LANGUAGE="JavaScript"> function change(form, val) { meter = val.value    centi = val.value nedan = (meter * 40)+ centi * 4 form.ans.value = nedan ; return false; } </SCRIPT> <FORM NAME="f" onSubmit="return change(this, this.num)"> <INPUT NAME="meter" SIZE="5" ONCHANGE="change(this.form, this)"> m <select name="centi" size="1" ONCHANGE="change(this.form, this)"> <option selected value="0">0 <option value="10">10 <option value="20">20 <option value="30">30 <option value="40">40</option> </select> cm <p>  <INPUT NAME="ans" SIZE="8" ></p> </FORM> 長々とすみません、どうかお願いします。

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

  • ベストアンサー
  • arukamun
  • ベストアンサー率35% (842/2394)
回答No.2

No.1のarukamunです。 >ただ、最初に10cmとか選んだときにmeterが空白だからとは思うんですが計算されずにNanとでてきます。 一番簡単な方法は <INPUT NAME="meter" SIZE="5" ONCHANGE="change(this.form, this)"> にVALUE="0"を追加する。 >テキストボックスに何も入力しなかったら0の初期値になるってできるのでしょうか?? VALUE=0を設定しない方法は nedanを計算する直前に if ( isNaN(meter) ) meter = 0 ; を入れれば大丈夫です。 ご確認ください。

yuichi777rf
質問者

お礼

ありがとうございます。 完璧に動作しました。 返事が遅くなってしまって申し訳ありません☆ これからもがんばってJavaScriptを勉強していきます☆

その他の回答 (1)

  • arukamun
  • ベストアンサー率35% (842/2394)
回答No.1

function change(form, val) { var meter = eval(form.meter.value) ; var centi = eval(form.centi.value) ; var nedan = meter * 40 + centi * 4 ; form.ans.value = nedan ; return false; } にchange関数を変更してみてはいかがでしょうか。 元の関数ではmeterまたはcentiが変更されても変更したmeterまたはcentiの変更した方の値がval.valueに入ってきますので、meter変数、centi変数に同じ値が入ってしまいます。 いかがでしょうか。

yuichi777rf
質問者

お礼

ありがとうございます!! 早速動作しました。 ただ、最初に10cmとか選んだときにmeterが空白だからとは思うんですが計算されずにNanとでてきます。 テキストボックスに何も入力しなかったら0の初期値になるってできるのでしょうか?? 質問ばっかりですみません・・

関連するQ&A

  • ボタンを押して計算結果を出したい

    下記のもの、うまくいきません。 どのようにしたらよいのでしょうか? 教えてください。よろしくお願いします。 <HTML> <HEAD> <TITLE>Calculator</TITLE> <SCRIPT language = "JavaScript"> function calc(Submit){ Num1 = document.foam1.Num1; Num2 = document.foam1.Num2; Ans = document.foam1.Ans; document.foam1.Ans.value = s1 Ans s2; } </SCRIPT> </HEAD> <PRE> 数値1 演算子 数値2 答え</PRE> <FORM METHOD=GET ACTION="/calc/calc.exe"> <INPUT NAME="Num1" VALUE="" onChange="calc()"> <SELECT NAME="Opr" SIZE=1 VALUE="" onChange="calc()"> <OPTION>+<OPTION>-<OPTION>*<OPTION>/</SELECT> <INPUT NAME="Num2" VALUE="" onChange="calc()"> = <INPUT NAME="Ans" VALUE="" onChange="calc()"> <INPUT TYPE="Submit" VALUE="計算"> </FORM> <H2></H2> </HTML>

  • javascriptについての質問です。複数のselect等で選択した

    javascriptについての質問です。複数のselect等で選択した文字の値をinputに表示したいのですが2 こちらで <script> function changeFunc(f){ f.elements["text1"].value=f.elements["select1"].value+f.elements["select2"].value; } </script> <FORM> <SELECT NAME="select1" onchange="changeFunc(this.form)"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" a">a</OPTION> <OPTION VALUE=" b">b</OPTION> <OPTION VALUE=" c">c</OPTION> </SELECT> <SELECT NAME="select2" onchange="changeFunc(this.form)"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" 壱">壱</OPTION> <OPTION VALUE=" 弐">弐</OPTION> <OPTION VALUE=" 参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> というプログラムを教えていただいたのですが 最新のブラウザーではどれもが動作するのですが IE5.IE6.IE7で動かなくて困っております。 IE5は仕方ないカナとも思ってしまったりするのですが IE6 IE7では動いて欲しくて困っています。 どなたか助けていただけないでしょうか

  • JavaScriptの入力制御がうまく働きません。

    JavaScriptでフォームの入力制御を行い、POSTされた値をPHPで精査して表示するコードを書いたのですが、下の例の「フード」で「その他」以外を選択するとまったく何も表示されません。ちなみにPHPのdisplay_errorsを.htaccessでOnにしてもエラーは表示されず、またJavaScriptをOFFにすると正常に表示されることから、PHPのコードではなく、JavaScriptのtxt.value=""; の部分に問題があると思われます。ですが、いろいろ調べましたが手詰まりになりました。 PHPとJavaScriptの双方にお詳しい方、どうかご教授くださいますようお願いいたします。 以下、問題のコードです。長くて申し訳ありませんm(_ _)m <script type="text/javascript"> function zzz(list,txt){ if (list.value == "その他"){ txt.disabled=false; }else{ txt.value=""; txt.disabled=true; } } </script> <?php if(!isset($_POST['pet'])){ ?> <body onload="zzz(document.getElementById('pet'),document.getElementById('petOther')),zzz(document.getElementById('food'),document.getElementById('foodOther'))"> <form method="post" action="test.php"> ペット: <select name="pet" id="pet" onchange="zzz(this,document.getElementById('petOther'))"> <option value="" selected="selected">↓</option> <option value="犬">犬</option> <option value="猫">猫</option> <option value="その他">その他</option> </select> (⇒<input type="text" name="petOther" value="" size="20" id="petOther" />) <br /> フード: <select name="food" id="food" onchange="zzz(this,document.getElementById('foodOther'))"> <option value="" selected="selected">↓</option> <option value="缶詰">缶詰</option> <option value="ドライフード">ドライフード</option> <option value="その他">その他</option> </select> (⇒<input type="text" name="foodOther" value="" size="20" id="foodOther" />) <button class="submit" type="submit"><span class="submitBTN">送信内容確認画面へ進む</span></button> </form> <?php }else{ print "<body>\n"; foreach($_POST as $key => $val){ if($key == "pet"){ if($val != "その他"){ $pet = $val; } } if($key == "petOther"){ if(!empty($val)){ $pet = $val; } } if($key == "food"){ if($val != "その他"){ $food = $val; } } if($key == "foodOther"){ if(!empty($val)){ $food = $val; } print $pet."に".$food."を与える"; } } } ?> </body> </html>

  • javascriptでの完全一致による表記(3)

    前回、以下の質問に対して素晴らしいコードをお教えいただきました。 ホームページに組み込みを行っている最中にどうしても追加したい機能がありまして。 下部のコードは、以下の仕組みになっています。 往路⇒【東京】→【名古屋】=<単価>*【枚数】=<合計> 復路⇒【名古屋】→【東京】=<単価>*【枚数】=<合計> 【支払方法*1】=<割引額> 往路+復路-割引額=<合計金額> *1:銀行振込と代金引換があり、銀行振込を選択しますと、割引が行われる仕組みです。 組み込みたいと思っている機能ですが、銀行振込を選択しますと、100円引きになっていますが、 銀行振込を選択した場合、1枚毎に100円割引をしたいです。 以下のような感じです。 (往路枚数+復路枚数)*100⇒往路合計+復路合計-割引額=合計 特にフォームを追加したいとかではありません。 割引額を表示するフォームに「(往路枚数+復路枚数)*100」この計算を表示し、 総合計に往路合計+復路合計-割引額を表示したいです。 JavaScriptにお詳しい方、何卒、よろしくお願いいたします。 ↓以下コード↓ <script type="text/javascript"><!-- var ryoukinhyo={ "東京":{ "名古屋":{ "自由席":{"価格":100} } }, "名古屋":{ "東京":{ "自由席":{"価格":100} } } } var waribikihyo={ "銀行振込":100, "代金引換":0 } function check(f){ var shuppatu=f.shuppatu.value; var touchaku=f.touchaku.value; var shubetu =f.shubetu.value; var paytype =f.paytype.value; var maisu =parseInt(f.maisu.value); var maisu2 =parseInt(f.maisu2.value); var tanka =f.tanka; var tanka2 =f.tanka2; var waribiki = f.waribiki; var goukei =f.goukei; var p2 = 0; if(!shuppatu || !touchaku || !shubetu || !paytype || !maisu) return false; var p=(!ryoukinhyo[shuppatu] || !ryoukinhyo[shuppatu][touchaku] || !ryoukinhyo[shuppatu][touchaku][shubetu])?false:ryoukinhyo[shuppatu][touchaku][shubetu]["価格"]*maisu; if(p) { tanka.value=p.toString(); if(f.shuppatu2.value && f.touchaku2.value && f.shubetu2.value && maisu2){ p2=(!ryoukinhyo[f.shuppatu2.value] || !ryoukinhyo[f.shuppatu2.value ][f.touchaku2.value] || !ryoukinhyo[f.shuppatu2.value][f.touchaku2.value][f.shubetu2.value])?false:ryoukinhyo[f.shuppatu2.value][f.touchaku2.value][f.shubetu2.value]["価格"]*maisu2; if(p2){tanka2.value=p2.toString();} } if(waribikihyo[paytype]){ waribiki.value=waribikihyo[paytype].toString(); }else{ waribiki.value="割引はありません"; } goukei.value=(p + p2 - waribikihyo[paytype]).toString(); }else{ tanka.value="0"; waribiki.value="割引はありません"; goukei.value="【この区間は、販売しておりません】"; } } --></script> <form> 往路:<select name="shuppatu" onchange="check(this.form)"> <option value="">出発選択</option> <option value="東京">東京</option> <option value="名古屋">名古屋</option> </select> <select name="touchaku" onchange="check(this.form)"> <option value="">到着選択</option> <option value="名古屋">名古屋</option> <option value="東京">東京</option> </select> <select name="shubetu" onchange="check(this.form)"> <option value="">種別選択</option> <option value="自由席">自由席</option> </select> <select name="maisu" onchange="check(this.form)"> <option value="1">1</option> <option value="2">2</option> </select><br> 復路:<select name="shuppatu2" onchange="check(this.form)"> <option value="">出発選択</option> <option value="東京">東京</option> <option value="名古屋">名古屋</option> </select> <select name="touchaku2" onchange="check(this.form)"> <option value="">到着選択</option> <option value="名古屋">名古屋</option> <option value="東京">東京</option> </select> <select name="shubetu2" onchange="check(this.form)"> <option value="">種別選択</option> <option value="自由席">自由席</option> </select> <select name="maisu2" onchange="check(this.form)"> <option value="1">1</option> <option value="2">2</option> </select><br> <select name="paytype" onchange="check(this.form)"> <option value="">支払選択</option> <option value="銀行振込">銀行振込</option> <option value="代金引換">代金引換</option> </select> <div>往路合計:<input type="text" name="tanka" value="0" /> + 復路合計:<input type="text" name="tanka2" value="0" /> - 割引:<input type="text" name="waribiki" value="0" /> = 合計:<input type="text" name="goukei" /></div> </form>

  • javascriptについて

    function df(){ document.ad.ad1.value=500; } function df2(a){ var sty=a.ad2.selectedIndex; a.ad3.value=eval(a.ad1.value)*eval(a.ad2.options[sty].value); } function df3(){ var s1=document.ad.ad3.value; var s2=document.ad.ad4.value; var fv=s1+"円\n"+ s2+"様"; var don=confirm(fv); } function df4(){ var p=0; if(document.ad.ad4.value==""){ p=1; } if(p){ alert("記入漏れ"); return false; } else{ return true; } } --> </script> </head> <body> <form action="#" method="POST" name="ad"> <p>ラーメン<input type="text" soze="20" value="500" name="ad1" onChange="df()">円</p> <p><select name="ad2" onChange="df2(this.form)"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> 個 </select> </p> <p>合計<input type="text" size="20" name="ad3">円</p> <p>備考:<input type="text" size="20" name="ad4"></p> <p><button onClick="df3();df4();"><img src="rtp/migi.jpg"></button></p> </form> </body> </html> 内容に間違いがあっても データーを送ってしまいます。 何故なんでしょうか?

  • javascriptの計算フォームでカンマ区切り

    下記のようなjavascriptの計算フォームで計算結果に3ケタのカンマ区切りと小数点第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>

  • Formのジャンプメニューでサイズを指定したサブウィンドウを出したい

    初歩的な質問で恐縮ですが、Formのジャンプメニューでサイズを指定したサブウィンドウを出したいのですがどの部分でサイズを指定すればいいのか分かりません。 以下のFormです。 よろしくお願いいたします。 ================================================================ <form name="form1"> <select name="menu1" onChange="MM_jumpMenu('window.open()',this,0)"> <option selected>あああ</option> <option value="aaa.html">あああ</option> (略) </select> </form>

  • firefox3.6でJavaScriptが動かない

    firefox2.xのころからだと思うのですが、 JavaScriptのOnChangeイベントが反応しません。 環境は、少し古いのですが、 ホームページビルダ10です。 ホームページ上へコンボボックスを配置して0~4の値を選択するようにしています。 ソースは以下のようになっています。 ======= <script language="JavaScript"> <!-- function Pent(formobj,pent0) { var v; v = eval(pent0.value); Pent.value = v; } //--> </script> <td valign="middle" height="28" width="13"><select size="1" style="font-size : 24px;" name="pent0" onchange="Pent(form,pent0)"> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select></td> ======= このソースでIE6では問題なく選択できるのですが、 firefoxだとonchangeに反応していないようです。 対処方法をお教えください。

  • チェックボックスとテキストボックスを連動させたい

    JavaScriptでチェックボックスにチェックが入るとテキストボックス自動で数字の1が入る仕組みを作っています。 以下のソースまではかけたのですが 列はそれほどないのですがと行数が多数存在します。 ファンクションが一つで済む方法はありませんでしょうか。 またデータを配列で送信したいのですが配列ですと動きません。 是非教えて頂けると幸いです。 <SCRIPT LANGUAGE="JavaScript"> function check1(radio) { //チェックボックスにチェックが入った場合 if(radio.checked) { form = radio.form; form.data1[1].value = radio.value; form.data1[2].value = radio.value; form.data1[3].value = radio.value; form.data1[4].value = radio.value; }else{ //チェックが外された場合 form = radio.form; form.data1[1].value = ""; form.data1[2].value = ""; form.data1[3].value = ""; form.data1[4].value = ""; } } function check2(radio) { //チェックボックスにチェックが入った場合 if(radio.checked) { form = radio.form; form.val5.value = radio.value; form.val6.value = radio.value; form.val7.value = radio.value; form.val8.value = radio.value; }else{ //チェックが外された場合 form = radio.form; form.val5.value = ""; form.val6.value = ""; form.val7.value = ""; form.val8.value = ""; } } </SCRIPT> <FORM METHOD="POST"> <INPUT TYPE="checkbox" NAME="r" VALUE="1" onclick="check1(this)">チェック1<BR> <INPUT NAME="data1[1]" SIZE="1"> <INPUT NAME="data1[2]" SIZE="1"> <INPUT NAME="data1[3]" SIZE="1"> <INPUT NAME="data1[4]" SIZE="1"><br> <INPUT TYPE="checkbox" NAME="r" VALUE="1" onclick="check2(this)">チェック2<BR> <INPUT NAME="val5" SIZE="1"> <INPUT NAME="val6" SIZE="1"> <INPUT NAME="val7" SIZE="1"> <INPUT NAME="val8" SIZE="1"> </FORM>

  • web上のリストボックス作成

    あるHTMLで、リストボックスをDREAMWEAVERでさくせいしました。 リストを選択すると、選択された名前のHTMLに飛ぶように指定したのですが、 ネスケでは動いてくれるのですが、IEでは飛んでくれません. 原因を教えてください。以下のようなHTMLです。 このためのCGIはくんでいません。 <form name="form2"> <select name="month"onChange="MM_jumpMenu('parent',this,0)"size="0"multiple> <option value="1.html"> 1 </option> <option value="2.html"> 2 </option> <option value="3.html"> 3 </option> <option value="4.html"> 4 </option> <option value="5.html"> 5 </option> </select> </form>

    • ベストアンサー
    • HTML