为什么更改项目名称后我没有正确获得总值？

Question

我是 Javascript 新手。我创建了一个发票表，其中最后一列中的总值是通过选择项目价格并将值放入数量字段来计算的。

我面临两个问题。

1. 当我将值放入数量时，总值计算正确，但当我更改项目名称时，总值没有更新正确的总值。

2. 当我设置输入类型即 type="number" 并尝试通过箭头添加值时，总值没有反映

代码如下：

<div class="box pattern pattern-sandstone">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Item</th><th>Description</th><th>Price</th><th>Qty</th><th>Total</th>
</tr></thead>
<tbody id="customFields">
<tr>
<td>1</td><td >
<?php
$conn = mysqli_connect('localhost','dbuser','dbpass','dbname'); 

$query_order_to = "SELECT * from gs_items ORDER BY item_name ASC";
$result_order_to = $conn->query($query_order_to); ?>
<select name="selected_item" id="selected_item" onchange="myItemPrice()" data-placeholder="Item Name" >
<option value="">Select Item</option>
<?php
while($rows=mysqli_fetch_assoc($result_order_to))
{ ?> <option data-price='<?php echo $rows['price']; ?>' value='<?php echo $rows['Id']; ?>'> <?php echo $rows['item_name']; ?></option>";
<?php } ?>  </select> </td>
<td ><textarea style="min-width: 90%;"></textarea></td>
<td >  <input type="text" name="getprice"  id="getprice" readonly></td>
<td ><input type="number" id="qty" onKeyUp="multiply()" input-number></td>
<td ><input  type="text" id="total" readonly></td>
<td><button onclick="addRow();">Add</button></td>
</tr>
</tbody>
</table>
</div>


<script>
 function findAddress(){
       var address = $('#select_data').find(':selected').data('address');
       $('#getcustomeraddress').val(address);
    }
</script>

<script>
 function myItemPrice(){
       var price = $('#selected_item').find(':selected').data('price');
       $('#getprice').val(price);
    }
</script>

<?php 

$conn = mysqli_connect('localhost','dbuser','dbpass','dbname'); 


function fill_unit_select_box($conn)
{ 
$query_item = "SELECT * from gs_items ORDER BY item_name ASC";
$result_item = $conn->query($query_item);
 $x = 1;
foreach($result_item as $rows)
{    echo '<option data-prices="'.$rows['price'].'" value="'.$rows['Id'].'">'.$rows['item_name'].'</option>';
 }
} ?>
<script>
  function addRow()
  {  var table = document.getElementById("customFields");
var i = 0;
while (i <= table.rows.length) {
    i++;
 }
i=i-1; 
    var html = '';
  html += '<tr>';
  html += '<td >'+i+'</td>';
  html += '<td><select name="selected_items'+i+'" id="selected_items'+i+'" onchange="myItemPrices(' + i +')" data-placeholder="Item Name" ><option value="">Select Item</option>';
  html += ' <?php echo fill_unit_select_box($conn); ?>
  </select></td>';
    html += '<td > <textarea style="min-width: 90%;"></textarea></td>';
    html +='<td ><input type="text" disabled name="getprices'+i+'" style="font-size: 12px; color: #333333;" id="getprices'+i+'" ></td>';
    html +='<td ><input type="number" ></td>';
     html +='<td ><input type="number" ></td>';
    html +='<td><button onclick="remove();">Remove</button></td>';
    html +='</tr>';
    $('#customFields').append(html);
  }
 function myItemPrices(var1){
 i=var1;
 var prices = $('#selected_items'+i+'').find(':selected').data('prices');
 $('#getprices'+i+'').val(prices); }  

   </script>

<script>
function multiply() {
  a = Number(document.getElementById('qty').value);
  b = Number(document.getElementById('getprice').value);
  c = a * b;

  document.getElementById('total').value = c;
}
</script>

Answer 1

经过多次尝试找到解决方案，我终于得到了答案：

 <script>
     function myItemPrice(){
           var price = $('#selected_item').find(':selected').data('price');
           $('#getprice').val(price);
           var getprice = document.getElementsByName('getprice')[0].value;
          var qty = document.getElementsByName('qty')[0].value;
          var total;
         total = parseFloat(getprice) * parseFloat(qty);
          document.getElementsByName('total')[0].value = total;
        }
    </script>