JavaScriptを使って、簡単な注文入力ページ

Question

###前提・実現したいこと
PHPページ内にて、JavaScriptを使って、簡単な注文入力ページを作っています。
金額が決まっているもの（price10まで）と手動で入力したものを合わせて計算したいのですが、手動入力の部分の計算がうまくできません。
かなりの初心者です。

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

計算できない。NaNで表示されてしまいます

エラーメッセージ
NaN

###該当のソースコード
PHPページ内JavaScript

function keisan(){

   //商品11
    var field011 = parseInt(field011,10);
    var price11 = document.form1.goods11.selectedIndex * "field011"; // 単価を設定
    document.form1.field11.value = price11; 
    // 小計を表示

// 合計を計算
    var total = price1 + price2 + price3 + price4 + price5 + price6 + price7 + price8 + price9 + price10 + price11 ;

    // 設定終了
    document.form1.field_total.value = total; // 合計を表示
}

###該当のhtml部分

<div class="row"> <div class="col-sm-6"> <h5>その他商品1 <input type="text" name="text11" size="auto" placeholder="商品名入力"　value=""></h5> </div> <div class="col-sm-6 kakaku"> <table> <col width="33%"> <col width="30%"> <col width="35%"> <tr> <td>¥<input type="text" name="field011" size="6" value="0"></td> <td><select name="goods11" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </td> <td><input type="text" name="field11" size="8" value="0"> 円</td> </tr> </table> </div> </div>

###試したこと
課題に対してアプローチしたことを記載してください
webで検索したけれど、ほとんど理解できずここに行き着きました。

###補足情報(言語/FW/ツール等のバージョンなど)
PHPもJavaScriptもかなり初心者です。
Sublime Textで記述、XAMPPで確認しています。

Comments

[masaya_ohashi]

随分と読んでいて頭の痛くなるコードですね…まず「自分がどんな仕様を求めているか」をまとめることが先決ですね。これはfield011というinputに自由に単価を入力し、goods11というselectで個数を指定し、field11というinputに単価と個数をかけた結果を表示し、field_totalというinputに「すでに計算されているprice1からprice10までと、先程手動で計算したprice11を合計した値を入れる」ということですね？そして、今field_totalにNaNと出てしまっている。後もう1つ、price1からprice10までを足していた時点ではNaNではなく正しい数字が出ていましたか？

[kumi_neko]

このサイトも今登録したばかりで、不慣れですみません。おっしゃる通りで、price1からprice10までを足していた時点では正しく計算されていました。price10までは// 商品10 var price10 = document.form1.goods10.selectedIndex * 14364; // 単価を設定 document.form1.field10.value = price10; // 小計を表示と書いていたので、同じ様に11も作ってしまった感じです。

[masaya_ohashi]

できればprice1からprice10を取得しているコードのほうも全部書いておいてもらえますか？その部分を省略して貼られていますよね？

[masaya_ohashi]

とりあえずいま貼られているコードから原因を推測した結果の回答を書きました。

Answer 1

問題はこの二行ですね。二点問題があります。

    var field011 = parseInt(field011,10);
    var price11 = document.form1.goods11.selectedIndex * "field011"; // 単価を設定

まず上の行ですが、いきなりfield011と書いても「form1.field011に入力された文字列」が取れるわけではありません。いままでもfieldに値を入れるときはfield.valueという形で入れてますよね？取り出すときも同じでfield.valueという形で値を取り出します。

    var field011 = parseInt(document.form1.field011.value,10);

下の行はなぜかfield011をダブルクォーテーションで囲ってしまっているため、個数×【field011という文字】というよくわからない計算式になっています。先程取り出した単価がfield011という変数に入れているので、そのまま変数を掛け算に使えばよいだけです。

    var price11 = document.form1.goods11.selectedIndex * field011; // 単価を設定

Comments

[kumi_neko]

画面の修正方法もわからないまま、慌てていたところ丁寧に教えていただきありがとうございます。
周りに聞ける環境がないので、本当に助かりました。
ありがとうございました。

[masaya_ohashi]

老婆心ですが、「計算結果を入れておくほうのinput」はreadonly属性を付けて「直接手入力」できないようにしたほうがよいですよ。

https://www.w3schools.com/tags/att_input_readonly.asp

[masaya_ohashi]

もう一点、値段を自由入力できるところですが、「値段のあとに個数」を動かせば正常に動作しますが、「個数のあとに値段」を入力したときに合計に反映されないので、field011にもonChange="keisan()"を設定したほうがよいと思います。

[kumi_neko]

確かにそうですね。ご丁寧にありがとうございます！やってみます。