如何用Js addEventListener显示小计?

问题描述 投票:0回答:1

点击添加按钮后,小计值会更新,并显示价格 * 数量的结果,但不起作用。

`

<body>

<section class="section dashboard">
  <form action="http://127.0.0.1:4321/pembelian/add/create" method="POST">
    <input type="hidden" name="_token" value="zwlU7e6su5TVTxRAWZiXnMMdMFDrVZtk5WATlXWT" autocomplete="off">
    <div class="col text-end mb-4">
      <button type="submit" class="btn btn-outline-primary" id="submitButton" fdprocessedid="fh7vd">Buat Pesanan</button>
    </div>

  <div class="row">
          <div class="col-lg-4">
        <div class="card">
          <div class="image-container" style="width: 200px; height: 150px; background-color: white; display: flex; justify-content: center; align-items: center;">
            <img src="http://127.0.0.1:4321/assets/images/storage/../eskrim.jpg" class="card-img-top" alt="storage/../eskrim.jpg" style="max-width: 100%; max-height: 100%; object-fit: contain;">
          </div>
          <div class="card-body text-center">
            <h5 class="card-title">Es Krim</h5>
            <p class="card-text">Rp 12.500</p>
            <p class="card-text">13</p>
            <div class="flex flex-col gap-0 items-center">
              <input type="hidden" name="produkId[1]" value="1" id="produkId1">
              <div class="flex flex-row gap-0 items-center justify-center w-full">
                  <button type="button" id="button-min1" class="border-0 focus:outline-none" fdprocessedid="g7pore">-</button>

                  <input class="input-quantity border-0 bg-transparent focus:outline-none focus:ring-0" type="number" name="total_produk[1]" value="0" min="0" max="100" id="quantity1" fdprocessedid="wlgdxd">
                  
                  <button type="button" id="button-plus1" class="border-0 font-semibold focus:outline-none" fdprocessedid="rkul0jd">+</button>
              </div>
                  
                  <div class="flex flex-row w-full">
                    <span class="border-0">Subtotal : Rp</span>
                    <input id="subTotal1" value="0" type="text" class="border-0 text-sm text-start bg-transparent" disabled="" fdprocessedid="b4zjhr">
                  </div>
                </div>
                
              </div>
            </div>
          </div>

          <script>
            var minOp = document.getElementById('button-min1');
            var plusOp = document.getElementById('button-plus1');
            var quantity = document.getElementById('quantity1');
            var subTotal = document.getElementById('subTotal1');
            var submitButton = document.getElementById('submitButton');

            minOp.addEventListener('click', function() {
              var value = parseInt(quantity1.value);
              if (!isNaN(value) && value > 0) {
                quantity1.value = value - 1;
              }
              calcSubtotal1()
            })

            plusOp.addEventListener('click', function() {
              var value = parseInt(quantity1.value);
              if (!isNaN(value))
                quantity1.value = value + 1;

              calcSubtotal1()
              console.log('value', value);
            })

            function calcSubtotal1() {
              var price = 12500.00;
              var quantity = parseInt(quantity1.value);
              var subTotals = price * quantity;
              subTotal1.value = number_format(subTotals, 0,',','.');

              console.log('subTotal1.value', subTotal1.value);
            };

            

            function number_format (number, decimals, dec_point, thousands_sep) {
                // Strip all characters but numerical ones.
                number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
                var n = !isFinite(+number) ? 0 : +number,
                    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
                    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
                    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
                    s = '',
                    toFixedFix = function (n, prec) {
                        var k = Math.pow(10, prec);
                        return '' + Math.round(n * k) / k;
                    };
                // Fix for IE parseFloat(0.55).toFixed(0) = 0;
                s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
                if (s[0].length > 3) {
                    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
                }
                if ((s[1] || '').length < prec) {
                    s[1] = s[1] || '';
                    s[1] += new Array(prec - s[1].length + 1).join('0');
                }
                return s.join(dec);
            }
</body>

我确实把值改成1了,点击加号按钮的时候就变成0了。我还检查了console.log('value', value)和console.log('subTotal', Subtotal),数据进来了但小计根本没有改变。 我也问过chat gpt,但结果没有显示任何进展。

有人可以帮助我吗?

javascript php laravel-blade addeventlistener laravel-cashier
1个回答
0
投票

程序按预期运行。 number_format 函数有问题。所以我用这个相当于PHP函数number_format的JS是什么?

感谢您的关注。

© www.soinside.com 2019 - 2024. All rights reserved.