教育・子育て

JavaScript　第7章　フォームを処理するプログラム③

マんタ's icon'
  • マんタ
  • 2020/05/29 05:27

こんにちは！今日は、消費税計算の表示からやっていきます。

<script type="text/javascript">
<!--
function ocha1(){
 document.form1.sum1.value=1000*document.form1.na1.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 document.form1.zei.value=parseInt(document.form1.gou.value) *0.1

 }
function ocha2(){
 document.form1.sum2.value=300*document.form1.na2.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 document.form1.zei.value=parseInt(document.form1.gou.value) *0.1

   
 }
function ocha3(){
 document.form1.sum3.value=500*document.form1.na3.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 document.form1.zei.value=parseInt(document.form1.gou.value) *0.1


 }
-->
</script>

とりあえず昨日のプログラムに

 document.form1.zei.value=parseInt(document.form1.gou.value) *0.1

を追加

本体の合計の下に

<tr>
<th colspan="4" class="right">税(10%)</th>
<td class="right"><input name="zei" type="text" value="0" size="18" class="right">円</td>
</tr>

 

を追加します。起動すると・・・・・

Content image

では、個数を入れて計算されるか確かめてみますｗｗｗ

Content image

こんな風に出ます。

 

では、消費税の合計のプログラムを引き続き書いていきます。こんな感じです

<!--
	function ocha1(){
		document.form1.sum1.value=1000*document.form1.na1.selectedIndex;
		document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
		document.form1.zei.value=parseInt(document.form1.gou.value) *0.1
 		document.form1.All.value= parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
		}
	function ocha2(){
		document.form1.sum2.value=300*document.form1.na2.selectedIndex;
		document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
		document.form1.zei.value=parseInt(document.form1.gou.value) *0.1
 		document.form1.All.value= parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.yusou.value);

 		
		}
	function ocha3(){
		document.form1.sum3.value=500*document.form1.na3.selectedIndex;
		document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
		document.form1.zei.value=parseInt(document.form1.gou.value) *0.1
 		document.form1.All.value= parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
		}

起動はあとでやります。

続けて配送料のプログラムも書いていきます。

<script type="text/javascript">
<!--
function ocha1(){
 document.form1.sum1.value=1000*document.form1.na1.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 document.form1.zei.value=parseInt(document.form1.gou.value) *0.1
  document.form1.All.value= parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
 }
function ocha2(){
 document.form1.sum2.value=300*document.form1.na2.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 document.form1.zei.value=parseInt(document.form1.gou.value) *0.1
  document.form1.All.value= parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.yusou.value);

   
 }
function ocha3(){
 document.form1.sum3.value=500*document.form1.na3.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 document.form1.zei.value=parseInt(document.form1.gou.value) *0.1
  document.form1.All.value= parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
 }
function kei4(){
 switch(document.form1.otodoke.selectedIndex){
  case 0:document.form1.sou.value=0;break;
  case 1:document.form1.sou.value=700;break;
  case 2:document.form1.sou.value=600;break;
  case 3:document.form1.sou.value=500;break;
  case 4:document.form1.sou.value=500;break;
  case 5:document.form1.sou.value=450;break;
  case 6:document.form1.sou.value=500;break;
  case 7:document.form1.sou.value=600;break;
  case 8:document.form1.sou.value=700;break;
  }
 document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
 }
-->
</script>

さっきのプログラムと合わせるとこんな感じになります。

でHTMLの方の追加部分

<tr>
<th colspan="4" class="right">税(10%)</th>
<td class="right"><input name="zei" type="text" value="0" size="18" class="right">円</td>
</tr>
<tr>
<th colspan="2" class="right">届け先</th>
<td class="right"><select name="otodoke" onchange="kei4()">
<option value="sentaku">地域選択</option>
<option value="hokkaidou">北海道</option>
<option value="touhoku">東北</option>
<option value="kantou">関東</option>
<option value="chuubu">中部</option>
<option value="kansai">関西</option>
<option value="chuugoku">中国</option>
<option value="shikoku">四国</option>
<option value="kyuusyu">九州</option></select></td>

<th class="right">送料</th>
<td class="right"><input type="text" name="sou" value="0" size="18" class="right">円</td>
</tr>
<tr>
<th colspan="4" class="right">総合計</th>
<td class="right"><input type="text" name="All" value="0" size="18" class="right">円</td>
</tr>

 

今回のプログラムはswitch～caseを使います

使い方

条件値によって処理を分岐

　　switch(document.form1.otodoke.selectedIndex){
  　　　　case 条件A：処理A;break;
  　　　　case 条件B：処理B;break;
　　　　  case 条件C：処理C;break;
           ・
           ・
           ・
           ・
           ・

  　　　　default：処理S;break;
　　　　  }

条件値によって処理を分岐

どの条件にも当てはまらない場合は処理Sが実行されます。

各処理の終わりにはbreakを記述。

記述しないと以降の処理が続けて実行されるので注意！！！

ではではプログラムを起動

Content image

このように送料が加わり総合計が計算されます。

 

最期にテキストボックスからフォーカスを外すについて説明

テキストボックスからフォーカスを外す

document.フォーム名.テキストボックス名.blur()

指定したテキストボックスからフォーカスを外して処理の対象にしなくする。

ここまでご覧いただきありがとうございました。

わからないことがあればコメント欄におきがるに・・(⌒∇⌒)

答えらるかどうかはわかりませんが・・・・・・・

次回　JavaScript　第7章　フォームを処理するプログラム④終の予定・・・

BYマんタ

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

参考書は

よくわかる

ゼロからはじめるJavaScript

発行者　　大森　康文

著作/制作　富士通エフオーエム株式会社

 

 

 

JavaScript Webページ プログラミング Office topic-education-parenting
Article tip 0人がサポートしています
獲得ALIS: Article like 2.24 ALIS Article tip 0.00 ALIS
マんタ's icon'
  • マんタ
  • @25kit6
遂に！今年最後の月！！！気温もかなり下がって最低気温一桁だけど、まだなんとか耐えられる！年内に雪降らないトいいけどね(￣▽￣)
投稿者の人気記事
コメントする
コメントする
こちらもおすすめ！
Eye catch
他カテゴリ

機械学習を体験してみよう！（難易度低）

Like token Tip token
124.82 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
121.79 ALIS
Eye catch
他カテゴリ

防犯意識 マーキング 下書き供養④

Like token Tip token
24.07 ALIS
Eye catch
他カテゴリ

オランダ人が語る大麻大国のオランダ

Like token Tip token
46.20 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin（ドージコイン）の誕生から現在まで。注目される非証券性🐶

Like token Tip token
38.31 ALIS
Eye catch
他カテゴリ

京都のきーひん、神戸のこーへん

Like token Tip token
12.10 ALIS
Eye catch
他カテゴリ

BCAAは本当に必要なのか？徹底的調査

Like token Tip token
1.20 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

Like token Tip token
947.13 ALIS
Eye catch
他カテゴリ

ALISのシステム概観

Like token Tip token
5.00 ALIS
Eye catch
クリプト

約２年間ブロックチェ－ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
クリプト

続・NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
6.37 ALIS
Eye catch
他カテゴリ

テレビ番組で登録商標が「言えない」のか考察してみる

Like token Tip token
26.20 ALIS