javascript - Javascript 订购表格无法计算时遇到问题

Question

因此，当我尝试使用 JavaScript 计算总计时，我的订单出现空错误。我相信我已经完成了一切。我在下面第 13 行收到一个以 .innerHTML 开头的错误

<script type="text/javascript">
function doTotals() {

var strains = ['guptakush_', 'headbandguptakush_', 'purplejuicyfruitguptakush_', 'hibiscussunrise_', 'criticalkushguptakush_', 'columbiagoldguptakush_', 'grapeapeguptakush_', 'krishnakush_', 'durbinpoisonguptakush_', 'purpleeurkleguptakush_', 'columbiagoldafgani_', 'kandykushguptakush_', 'hibiscussunriseafgani_', 'afgani_', 'grapeapeafgani_', 'krishnaafgani_', 'hashplantafgani_', 'durbinpoisonafgani_'];
var priceStr = 'price';
var quantityStr = 'quantity';
var subtotalStr = 'subtotal';
var total = 0.00;
for (var i = 0; i < strains.length; i++) {
    var price = document.getElementById(strains[i] + priceStr).value;
    var quantity = document.getElementById(strains[i] + quantityStr).value;
    document.getElementById(strains[i] + subtotalStr)
        .innerHTML = parseInt(price) * parseInt(quantity);
    total += price * quantity;
}
document.getElementById("finaltotal").innerHTML = total;
}

function setup() {
var lastCol = document.getElementById("subtotal_header");

var theForm = document.getElementById("orderform");

var amounts = document.getElementsByTagName("select");
for(var i = 0; i < amounts.length; i++){
    amounts[i].onchange = doTotals;
}

}

window.onload = setup;

</script>

下面是仅关联一个示例的 HTML，它们都是相同的，具有唯一的 ID 和名称。

<div class="form-group mb-3">
<label class="form-control-label" for="guptakush_quantity">Gupta Kush</label>
<input type="hidden" id="guptakush_price" value="1.00">
<select class="form-control-inline form-control-sm" id="guptakush_quantity" name="guptakush_quantity" size="1">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<input type="hidden" id="guptakush_subtotal">
</div>
<div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">$</div>
    </div>
<input type="text" class="form-control-inline col-sm-1" id="finaltotal" name="finaltotal" placeholder="$0.00" readonly>
</div>

完整示例: https://jsfiddle.net/dg260zxf/

此外，如果我可以在没有小计的情况下完成这项工作，因为我认为没有必要，那就太棒了。

Answer 1

问题是数组包含的 Div 数量多于 HTML 中不包含的 Div，

第一项'guptakush_'仅存在于html中

因此，如果您在设置值之前检查 div 是否存在，它将解决问题+最终总计输入不是 html，因此将新值放入 .value 而不是 .inerHTML

工作演示:

function doTotals() {

  var strains = ['guptakush_', 'headbandguptakush_', 'purplejuicyfruitguptakush_', 'hibiscussunrise_', 'criticalkushguptakush_', 'columbiagoldguptakush_', 'grapeapeguptakush_', 'krishnakush_', 'durbinpoisonguptakush_', 'purpleeurkleguptakush_', 'columbiagoldafgani_', 'kandykushguptakush_', 'hibiscussunriseafgani_', 'afgani_', 'grapeapeafgani_', 'krishnaafgani_', 'hashplantafgani_', 'durbinpoisonafgani_'];
  
  var priceStr = 'price';
  var quantityStr = 'quantity';
  var subtotalStr = 'subtotal';
  var total = 0.00;
  for (var i = 0; i < strains.length; i++) {
    var priceInput = document.getElementById(strains[i] + priceStr);
    var quantityInput = document.getElementById(strains[i] + quantityStr);
    var subTotalDiv = document.getElementById(strains[i] + subtotalStr);

      if(subTotalDiv) {
        var price = priceInput.value;
        var quantity = quantityInput.value;

        subTotalDiv
          .innerHTML = parseInt(price) * parseInt(quantity);
        total += price * quantity;
      }
  }

  document.getElementById("finaltotal").value = total;
}

function setup() {
  var lastCol = document.getElementById("subtotal_header");

  var theForm = document.getElementById("orderform");

  var amounts = document.getElementsByTagName("select");
  for(var i = 0; i < amounts.length; i++){
      amounts[i].onchange = doTotals;
  }

}

window.onload = setup;

<div class="form-group mb-3">
<label class="form-control-label" for="guptakush_quantity">Gupta Kush</label>
<input type="hidden" id="guptakush_price" value="1.00">
<select class="form-control-inline form-control-sm" id="guptakush_quantity" name="guptakush_quantity" size="1">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<input type="hidden" id="guptakush_subtotal">
</div>
<div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">$</div>
    </div>
<input type="text" class="form-control-inline col-sm-1" id="finaltotal" name="finaltotal" placeholder="$0.00" readonly>
</div>