事例紹介-４　計算

事例紹介－４：簡単な見積計算

　ＨＰの見積り等に使われる計算の事例で、入力部分はプルダウンメニューで表示し、選択（更新）した時点でJavaScriptの関数を実行します。尚、先にも述べましたが、JavaScriptはローカルのパソコンで処理しますので、これを注文情報としてメールで送信し注文を受けるのは問題があります。それは、在庫の引き当てが出来ないからです。

選択して金額を計算

a
b
c
d
e
f
g
h

function mikan_k(){

    　document.mitsumori.kakaku1.value = document.mitsumori.mikan.value;

    　gokei();　}

    function kaki_k(){

    　document.mitsumori.kakaku2.value = document.mitsumori.kaki.value;

    　gokei();　}

    function gokei(){

    　document.mitsumori.kakaku_kei.value = 

    　parseInt(document.mitsumori.kakaku1.value) +parseInt(document.mitsumori.kakaku2.value);　}

A
B
C
D
E
F
G
H

I
J
K
L
M
N
O
P

Q

body 以降に記述。　尚、以下は重要部分だけ表記しています。

    <FORM name="mitsumori">

    <select name="mikan" onChange="mikan_k()">

    <option value="0" selected>　　　</optio>

    <option value="300">　１Ｋ</option>

    <option value="550">　２Ｋ</option>

    <option value="800">　３Ｋ</option>

    </select>

    <input disabled type="text" name="kakaku1" size="10" value="0" style="text-align:right;">

    <select name="kaki" onChange="kaki_k()">

    <option value="0" selected>　  </option>

    <option value="100">　１個</option>

    <option value="280">　３個</option>

    <option value="450">　５個</option>

    </select>

    <input disabled type="text" name="kakaku2" size="10"
    value="0" style="text-align:right;">

    <input disabled type="text" name="kakaku_kei" size="10"
    value="0" style="text-align:right; background-color:blue;">

    </FORM>

a
b
c
def
g
h
g
h

A
B
C-F
G
H

I-N
O
P
Q

関数 mikan_k()の開始

    H部分 FORM Mitsumori の kakaku1 に mitsumori の mikan の値を代入

    関数 gokei の実行

    関数 kaki_k()の実行で、上記abcと同じ要領。

    関数 gokei の実行。

    P部分　金額計 FORM Mitsumori の kakaku_kei に mitsumori の kakaku1 とkakaku2の合計を代入

    関数 gokei の実行。

    金額計 kakaku_kei に、kakaku1 と kakaku2 を加算して代入。parseInt は整数として扱う組込関数

    disable は入力不可指定

    入力領域の定義で、名前 name= は、mitsumori

    ミカン用のプルダウンメニュー select、 名前 name= は mikan、更新 onChange されたら、関数 mikan_k() を実行

    メニューの表示、value は値、select は初めの画面に表示されるメニュー

    1つのプルダウンメニューの終了

    ミカンのプルダウンメニューで選択された値が代入される領域

    　名前は kakaku1、表示幅 size= は半角10文字、初期表示値 valueは0

    上記 B から G と同じ要領で、柿用のプルダウンメニュー 

    柿の用のプルダウンメニュー で選択された値が代入される領域、名前は kakaku2　その他 H と同じ要領

    金額計の領域 名前は kakaku_kei

    入力領域　FORM の終了

終わりに

ご清聴、ありがとうございました。ホームページ作成に携わったことのない方には、ちょっと辛い勉強会であったと思いますが、これを機会にＨＰ制作に興味を持って頂ければ幸いです。
尚、この勉強会のScriptは、ご自由にお使い下さい。

Scrip使用にあたっては、ブラウザからソース表示にして、そこからコピーして下さい。説明文からコピーしますと、正常に動作しない場合があります。

ミカン				円　１Ｋ \300　２Ｋ \550　３Ｋ \800
柿				円　１個 \100　３個 \280　５個 \450
金額計				円