WEB上で自動見積できるサイトを作りたい

Question

■やりたい事

WEBサイト上で自動見積りを行えるようにしたい
各項目の数値を変更すると小計金額、合計金額が計算されるようにしたい

■問題点

https://www.mitsumori-js.com/
このサイトのテンプレートを使用して自動計算は出来るようになりました。

しかし、数量と単価をどちらも入力して小計がでるようにしたかったので
それぞれクラス名の語尾に「2」をつけ別のクラスを指定しました。

javaの29～41行にはもとのコードをコピーし、それぞれ語尾を「2」にしています。

また、それに対応した計算をするように、53,54行からコードをコピーし
javaの69、70行目に「text2-quantity」としたコードを追記しています。

結果、数量を変更したときには自動計算されるようになりましたが、

単価を変更したときには自動で計算されないという状態で困っています。

ご回答を頂けますでしょうか。

また、下記javascriptのコードは
文字数の関係で改変したコード上部の部分のみ記載しています。

該当のソースコード

<div id="mitsumori">
    <table class="mitsumori-tbl">
        <thead>
            <th>項目</th>
            <th>数量</th>
            <th>単位</th>
            <th>単価</th>
            <th>金額</th>
        </thead>
        <tbody>
            <tr id="mitsumori-item-1" class="mitsumori-item" data-itemnum="1">
                <td class="item-name">見積項目１</td>
                <td class="item-quantity">1</td>
                <td class="item-unit">式</td>
                <td class="item-price0">
                    <select class="select-price" data-itemnum="1">
                        <option value=""></option>
                        <option value="10000">￥10,000</option>
                        <option value="20000">￥20,000</option>
                    </select>
                </td>
                <td class="item-price">￥<span></span></td>
            </tr>
            <tr id="mitsumori-item-2" class="mitsumori-item" data-itemnum="2">
                <td class="item-name">見積項目２</td>
                <td class="item-quantity"><input type="text" class="text2-quantity" size="2" data-itemnum="2"></td>
                <td class="item-unit">点</td>
                <td class="item-price0">
                    <select class="select2-price" data-itemnum="2">
                        <option value=""></option>
                        <option value="4000">￥4,000</option>
                        <option value="5000">￥5,000</option>
                        <option value="6000">￥6,000</option>
                    </select>
                </td>
                <td class="item-price">￥<span></span></td>
            </tr>
        </tbody>
    </table>
    <table class="mitsumori-total-tbl" data-taxflg="0">
        <tbody>
            <tr><th>合計金額</th><td>￥<span id="mitsumori-total"></span></td></tr>
        </tbody>
    </table>
</div>

"use strict";

window.onload = function() {
    var textQuantityElems = document.querySelectorAll('#mitsumori .text-quantity');
    textQuantityElems = Array.prototype.slice.call(textQuantityElems, 0);
    textQuantityElems.forEach(function (textQuantityElem, textQuantityIndex) {
        if (textQuantityElem.value!='') textQuantityElem.value='';
        textQuantityElem.addEventListener('keyup', calcPrice, false);
        textQuantityElem.addEventListener('blur', calcPrice, false);
    });
    var radioQuantityElems = document.querySelectorAll('#mitsumori .radio-quantity');
    radioQuantityElems = Array.prototype.slice.call(radioQuantityElems, 0);
    radioQuantityElems.forEach(function (radioQuantityElem, radioQuantityIndex) {
        if (radioQuantityElem.checked) radioQuantityElem.checked=false;
        radioQuantityElem.addEventListener('change', calcPrice, false);
    });
    var checkQuantityElems = document.querySelectorAll('#mitsumori .check-quantity');
    checkQuantityElems = Array.prototype.slice.call(checkQuantityElems, 0);
    checkQuantityElems.forEach(function (checkQuantityElem, checkQuantityIndex) {
        if (checkQuantityElem.checked) checkQuantityElem.checked=false;
        checkQuantityElem.addEventListener('change', calcPrice, false);
    });
    var selectQuantityElems = document.querySelectorAll('#mitsumori .select-price');
    selectQuantityElems = Array.prototype.slice.call(selectQuantityElems, 0);
    selectQuantityElems.forEach(function (selectQuantityElem, selectQuantityIndex) {
        selectQuantityElem.selectedIndex=0;
        selectQuantityElem.addEventListener('change', calcPrice, false);
    });
    var text2QuantityElems = document.querySelectorAll('#mitsumori .text2-quantity');
    text2QuantityElems = Array.prototype.slice.call(text2QuantityElems, 0);
    text2QuantityElems.forEach(function (text2QuantityElem, textQuantityIndex) {
        if (text2QuantityElem.value!='') text2QuantityElem.value='';
        text2QuantityElem.addEventListener('keyup', calcPrice, false);
        text2QuantityElem.addEventListener('blur', calcPrice, false);
    });
    var select2QuantityElems = document.querySelectorAll('#mitsumori .select2-price');
    select2QuantityElems = Array.prototype.slice.call(select2QuantityElems, 0);
    select2QuantityElems.forEach(function (select2QuantityElem, selectQuantityIndex) {
        select2QuantityElem.selectedIndex=0;
        select2QuantityElem.addEventListener('change', calcPrice, false);
    });

    function calcPrice() {
        var subtotal = 0,
            tax = 0,
            total = 0,
            itemNum = event.target.getAttribute('data-itemnum'),
            taxFlg = parseInt(document.querySelector('.mitsumori-total-tbl').getAttribute('data-taxflg')),
            items = document.querySelectorAll('.mitsumori-item');
        items = Array.prototype.slice.call(items, 0);
        items.forEach(function (itemElem, itemIndex) {
            if (itemElem.getAttribute('data-itemnum') == itemNum) {
                if (event.target.classList.contains('text-quantity')) {
                    itemElem.querySelector('.item-price span').textContent = escapeHtml(event.target.value) * escapeHtml(itemElem.querySelector('.unit-price').value);
                } else if (event.target.classList.contains('radio-quantity')) {
                    itemElem.querySelector('.item-price span').textContent = escapeHtml(event.target.value);
                } else if (event.target.classList.contains('check-quantity')) {
                    var checkLabels = itemElem.querySelectorAll('.check-quantity');
                    var _total = 0;
                    checkLabels = Array.prototype.slice.call(checkLabels, 0);
                    checkLabels.forEach(function (checkLabelElem, checkLabelIndex) {
                        if (checkLabelElem.checked) {
                            _total += parseInt(escapeHtml(checkLabelElem.value));
                        }
                    });
                    itemElem.querySelector('.item-price span').textContent = _total;
                } else if (event.target.classList.contains('select-price')) {
                    itemElem.querySelector('.item-price span').textContent = escapeHtml(itemElem.querySelector('.select-price').value);
                } else if (event.target.classList.contains('text2-quantity')) {
                    itemElem.querySelector('.item-price span').textContent = escapeHtml(event.target.value) * escapeHtml(itemElem.querySelector('.select2-price').value);
                }
            }
            if (itemElem.querySelector('.item-price span').textContent != '') {
                subtotal += parseInt(itemElem.querySelector('.item-price span').textContent);
            }
        });

Comments

[gentaro]

ここはコード載せたら誰かが勝手に手伝ってくれるサイトじゃないんで、あなたがそのコードのどの部分をどのように意図してプログラミングし、具体的にどのあたりの箇所が上手く行かないのかなど、ちゃんと説明してください。
これだけだとただの丸投げです。

[退会済みユーザー]

gentaro様
コメントありがとうございます。
質問内容を修正させていただきました。
ご回答頂けると、幸いです。

[hentaiman]

そういう指摘じゃないと思いますよ。
掲載しているjavascriptのコードを上から順にどんな処理しているか説明出来ますか？
最低限そうでなければ丸投げです。
ちゃんと理解して説明出来るのなら、期待通りの動作にならない個所のみをピンポイントで質問出来るはずです。
ピンポイントで質問出来れば丸投げという判断も消えて回答も付くものと思われます。

[miyabi_pudding]

退会してしまいましたか・・・。

Answer 1

対象となる第２TD要素の子は必ずinput要素にすること。
変更されることが嫌ならreadonly属性でもつけること。
合計は、tfoot 要素がよいのではないだろうか？

function calcPrice () {
  let
    tbody = mitsumori.querySelector ('table tbody'),
    suuryou = tbody.querySelectorAll ('tr td:nth-of-type(2) input'),
    tanka   = tbody.querySelectorAll ('tr td:nth-of-type(4) select'),
    kingaku = tbody.querySelectorAll ('tr td:nth-of-type(5) span'),
    mTotal  = document.querySelector ('#mitsumori-total'),
    total = [...kingaku].reduce ((total, e, i)=> {
      let p = Number (suuryou[i].value) * Number (tanka[i].value);
      e.textContent = p;
      return total + p;
    }, 0);

  mTotal.textContent = total;
}

calcPrice();
mitsumori.addEventListener ('change', calcPrice, true);
mitsumori.addEventListener ('input', calcPrice, true);