WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:javascriptで計算

ハル [WriteDate : Thu May 24 09:01:21 2001]

フォームの4つの入力欄から入力してもらった数値をある3つの計算式にあてはめて、別の3つの入力欄に出力したいんですが、可能でしょうか?
また、どのようにするといいのでしょうか。


ゆっちゃん [WriteDate : Thu May 24 09:32:15 2001]

可能ですよ。
ボタンをクリックしたら、計算を行うJavaScriptの関数を呼び出して、結果を入力欄にいれてあげればできます。


ハル [WriteDate : Thu May 24 16:05:15 2001]

回答ありがとうございます。

それで具体的な方法ですが、フォームで入力された数値を変数に代入し、別のフォームに出力する方法がよく判りません・・・。
アドバイスもしくは参考になるサイトをご存じでしたらぜひ教えてください。


Nobu3 [URL] [WriteDate : Thu May 24 18:06:39 2001]

http://www.age.ne.jp/x/nobu3/js/js007.htm
↑は参考になるでしょうか?


ちゃいぱ [WriteDate : Thu May 24 18:06:56 2001]

いろいろケースがありますが、とりあえず、以下の感じでどうですか?

<script type="text/javascript">
    function disp(){
       var i, n, m;

       m = "";
       for (i = 0; i < 3; i++){
            m = m + document.TestForm.elements[i].name + ":"
                  + document.TestForm.elements[i].value + "\n";
       }
       document.TestForm2.Msg.value = m;
    }    
</script>
<form name="TestForm">
NAME:<INPUT TYPE="text"   NAME="Name" SIZE=20><br>
AGE :<INPUT TYPE="text"   NAME="Age" SIZE=6><br>
JOB :<INPUT TYPE="text"   NAME="Job" SIZE=20><br>
<INPUT TYPE="button" NAME="bt" VALUE="確認" onClick="disp()">
</form>
<form name="TestForm2">
<TEXTAREA NAME="Msg" ROWS=4 COLS=30></TEXTAREA>
</form>


ちゃいぱ [WriteDate : Thu May 24 18:14:50 2001]

Nobu3さん、いつもお世話になっています。
複数のformのサンプルって、以外とないので、ちょっと作ってみました。

では、今日は、もう帰ります。(ちょと謎)


ハル [WriteDate : Fri May 25 14:13:22 2001]

Nobu3さん、サイトの御紹介ありがとうございます。
すごく丁寧で、これからじっくり勉強させて頂こうと思ってます。

ちゃいぱさん、サンプルありがとうございます。
上のプログラムなんですが、なぜかエラーになってしまいます。(IE4.5+Mac)
動かすには工夫がいるんでしょうか。
また、このプログラムについて質問なんですが、変数nは何を表しているのでしょうか?
不勉強をお許しください。

ところで余談ですが、JSでは例えば
変数 i は<INPUT TYPE="text" NAME="Name" SIZE=20>に入力された内容だよ〜という宣言は不要なんですか?
上の例だと私は <INPUT TYPE="text" NAME="Name" SIZE=20>,<INPUT TYPE="text" NAME="Age" SIZE=6>,<INPUT TYPE="text" NAME="Job" SIZE=20>のそれぞれに入力された数字をi,j,kという変数に格納し、演算処理して別の変数(=別のフォームの内容)に渡す……という考え方になっちゃうんですが。


ちゃいぱ [WriteDate : Fri May 25 16:17:16 2001]

>変数nは何を表しているのでしょうか?
残骸です。帰り際だったので、焦ってました...(謎)。

>変数 i は
部品のインデックスです。
http://www.parkcity.ne.jp/~chaichan/src/javasc17.htm
を参照してください。


ハル [WriteDate : Mon May 28 18:10:41 2001]

ようやく上記でご紹介頂いたサンプルを理解することができました!
変数 i について思い違いをしていたようです。
ありがとうございました^^
それで下記が作ったサンプルなんですが、おかしい部分がありましたら、また、もっとスマートな書き方がありましたらぜひご指摘・ご教授ください。よろしくお願いします。(こういうお願いがもしマナー違反でしたらお許し下さい。)

function loan(){

//フォーム1に空欄がないかチェック
    for(c=0; c<document.form1.length; c++){        //エレメントの数だけ処理を繰り返す
        if(document.form1.elements[c].type=="text"){    //1行入力フィールドの場合
            if(document.form1.elements[c].value==""){        //空欄の場合
                alert("すべての欄に入力してください");
                return false;        // falseを返す=後の処理が実行されない
                }
            }
        }

//form1に入力された数値を計算し、form2に出力

    var i, j, k, l ;
    i = Math.abs(eval(document.form1.input1.value));    //eval()で数値に変換
    j = Math.abs(eval(document.form1.input2.value));    //Math.abs()で絶対値を取得
    k = Math.abs(eval(document.form1.input3.value));
    l = Math.abs(eval(document.form1.input4.value));

    document.form2.out1.value= i + j + k +l ;
    document.form2.out2.value= Math.round((i + j - k) * l);        //小数点以下四捨五入
    document.form2.out3.value= Math.floor(i * j / k + l);            //小数点以下切り捨て
    }

<form name="form1">
数値を入力<br>
i<input type="text" name="input1" size="30"><br>
j<input type="text" name="input2" size="30"><br>
k<input type="text" name="input3" size="30"><br>
l<input type="text" name="input4" size="30"><br>
<br>
<input type="button" value="計算する" onClick="loan()">
</form>

<form name="form2">
答え<br>
i + j + k +l<input type="text" name="out1" size="30"><br>
(i + j - k) * l<input type="text" name="out2" size="30"><br>
i * j / k + l<input type="text" name="out3" size="30"><br>
</form>


ハル [WriteDate : Mon May 28 18:18:03 2001]

上記のスクリプトについてなんですが、
小数点以下3桁までの数値しか入れていないにも関わらず、
答えが94.55500000000001などとなったりするのですが、
なぜでしょうか?スクリプトの書き方が悪いのでしょうか。
他に同様の質問があったように思うんですが、探せませんでした。立て続けにすみません。


位相 [MAIL] [WriteDate : Tue May 29 10:14:32 2001]

http://www.parkcity.ne.jp/~chaichan/qanda/qa1201.htm?01-05-22-09-30
でしょうか?


ハル [WriteDate : Wed May 30 13:21:32 2001]

そうです、ありがとうございます!!

とりあえずここで完了にさせて頂きます。
皆さんありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]
ChaichanPAPA's World