【計算フォーム】JavaScriptで複数の商品、個数に応じて割引

前提・実現したいこと

６つの商品があるとして、各それぞれ価格が違い、
まとめ買いをすると、数量によって価格が割引される。
（割引は、％ではなく、多くなればなるほど割引が大きくなる個数に応じた割引価格）

商品は複数選択可能なようにして、プルダウン、ラジオボタン、チェックボタンは不問。
個数はインプットで数量を入力タイプ。
自動で値段表示でも、ボタンを押して表示でもどちらでもいいので
それで総合計を表示させたいです。

Wordpress使用。
JavaScriptとHTMLで作ろうとしてしています。

発生している問題・エラーメッセージ

基礎的な計算フォームはネット上に情報があるので、
それらを組み合わせたらなんとかなるかな？と思い、
色々と試行錯誤しましたが、お手上げ状態です。

載せているものはグチャグチャだと思うので、
既存のものをベースにして、足したり削ったりして、
求めているものになれ流ようにご指摘いただければ...
と思っております。

エラーメッセージ

該当のソースコード

<script type="text/javascript">
<!--
function keisan(){

      //入力された数を取得
      var num = Number(document.getElementById('num').value);
      var mess = num + "個の購入ありがとうございます。\nお会計は" + field_total1 + "円です"
      //条件によって計算
      if(num >= 1 && num <= 199 ){
        var field_total1 = num * 430
      }
      if(num >= 200 && num <= 299 ){
        var field_total1 = num * 260
      }
      if(num >= 300 && num <= 999 ){
        var field_total1 = num * 215
      }
      if(num >= 1000 && num <= 1999 ){
        var field_total1 = num * 180
       }
      if(num >= 1999 && num <= 2999 ){
        var field_total1 = num * 170
      }
      if(num >= 3000){
        var field_total1 = num * 160
      }

      document.getElementById('showMoney').innerHTML = mess;


// 計算開始

var tax = 8; // 消費税率


var price1 = eval(document.form1.goods1.value) * document.form1.volume1.selectedIndex; // 数量×単価
var price2 = eval(document.form1.goods2.value) * document.form1.volume2.selectedIndex;
var price3 = eval(document.form1.goods3.value) * document.form1.volume3.selectedIndex;


var total1 = parseInt(price1) + parseInt(price2) + parseInt(price3); // 合計を計算
var tax2 = Math.round((total1 * tax) / 100); //消費税を計算

// フォームのテキストエリアに表示する金額
document.form1.field_total1.value = total1; // 合計を表示
document.form1.field_tax.value = tax2; // 消費税を表示
document.form1.field_total2.value = total1 + tax2; // 税込合計を表示


 
//右の窓に表示する金額
document.getElementById("display_account_amount").innerHTML = total1;
document.getElementById("display_account_tax").innerHTML = tax2;
document.getElementById("display_account_all").innerHTML = total1 + tax2;

}

// --> 
</script>

HTML

<input type="text" id="num" placeholder="10">
<input type="button" value="購入価格の表示" onclick="keisan()">
<div id="showMoney"></div>

<p>下記項目を選択すると自動計算します。</p>
<form name="form1" action="" id="form1" method="post">
<table>
<tr>
<td>商品</td>
<td>&nbsp;</td>
<td>数量</td>
</tr>
<tr>
<td>果物</td>
<td><select name="price1" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="1000">すいか 1,000円</option>
<option value="450">いか 450円</option>
<option value="650">か　650円</option>
</select></td>
<td>
<input type="text" id="num1" placeholder="10">
<input type="button" value="購入価格の表示" onclick="keisan()">
</td>
</tr>
<tr>
<td>肉</td>
<td><select name="goods2" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="500">牛肉（100g）500円</option>
<option value="400">豚肉（100g）400円</option>
<option value="300">鶏肉（100g）300円</option>
</select></td>
<td><select name="volume2" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td>魚</td>
<td><select name="goods3" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="110">さけ　110円</option>
<option value="120">さば　120円</option>
<option value="130">いわし　130円</option>
</select></td>
<td><select name="volume3" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>合計</td>
<td><input type="text" name="field_total1" size="8" value="0">
円</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>消費税</td>
<td><input type="text" name="field_tax" size="8" value="0">
円</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>税込合計</td>
<td><input type="text" name="field_total2" size="8" value="0">
円</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</div>

試したこと

プラグインの「Calculated Fields Form」を試したのですが、
求めているのとは少し違いました。

参考サイト
こちらの記事を参考にしているのですが、１つの商品の場合だったので、
条件を変えるのが精一杯でした。

参考サイト
その下のコードはこちらから引っ張ってきています。

リンク
こちらのデモも商品を選んで個数を選んで割引になるのですが、
個数がそれぞれで変更できないのと、入力できないのでダメです...

補足情報（FW/ツールのバージョンなど）

上記の内容を見ていただけると分かっていただけると思いますが、
JavaScript初心者なので、どうにか繫げたらなんとかなるかな？と
色々と試しましたが、どこをどう触ればいいのか途方に暮れています。
どうかお助け下さい。お願い致します。

kei344

2018/11/22 18:28

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

cross1115

2018/11/22 18:33

指摘ありがとうございました。修正完了です。

gucha

2018/11/22 19:03

ブラウザの開発者ツールとjavascriptのコンソールコマンドは使えますか？まずはコードが止まった箇所を自分で確認できるようになるのが良いと思います。今回の場合参照できていない箇所が複数存在します。例として数量×単価の”var price1”はdocument.form1.goods1 の参照で止まっています。