Question

我设法从php文件中动态显示6个行成本DOM元素的总和。不幸的是，当尝试计算送货费用时，我的与deliveryCharge实现有关的JavaScript方法无法在页面上显示任何内容。在小计方法可以正常工作和显示的情况下，我尝试通过为innerHTML提供字符串和int的常量值来解决此问题，这两种方法都无法在屏幕上显示任何内容。

我已经显示了小计计算方法的工作部分以及交付费用计算的非工作部分。问题是否出在使用innerHTML的错误方式之内，是计算错误还是完全不同？

  function calcST(){
  var i;
  var sum = 0; // initialize the sum
  let p = document.getElementsByTagName("line_cost");

  for (i = 0; i < p.length; i++) {
    if (!isNaN(Number(p[i].innerHTML))) {
       sum = Number(sum + Number(p[i].innerHTML)); // p[i].innerHTML gives you the value
    }

  }

  setST(sum, "sub_total");
}


function setST(sum, item_id){
  let i = document.getElementById(item_id);
  i.innerHTML = sum;
  calcDelivCharge();
}


function getST() {
  let i = document.getElementById("sub_total");
  let v = i.innerHTML;
  return v;
}


function calcDelivCharge(){

  var delCharge;
  var e = getST();

  if(e < 100){
    delcharge = e*0.10
  }else{
    delcharge = 0;
  }

  setDelivCharge("delivery_charge", delCharge);
}

function setDelivCharge(item_id, delCharge){
  let i = document.getElementById(item_id);
  i.innerHTML = delCharge;
  calculateTAX();
}


function getDelivCharge() {
  let i = document.getElementById("delivery_charge");
  let v = i.innerHTML;
  return v;
}

Answer 1

我设法发现在调用getST（）方法之前DOM还没有准备好加载。可以使用以下代码解决此问题：

if(document.getElementById("sub_total") != null){
    let i = document.getElementById("sub_total");
    let v = i.innerHTML;
    return v;
  }

不幸的是，运费被视为“身份不明”。更改getST（）方法后，为什么会出现这种情况？

Answer 2

好吧，如果您使用的是HTML

<line_cost>
    <div>30</div>
    <div>40</div>
    ...
</line_cost>

您可以这样做：

function calcSubtotal() {

  const costs = document.querySelector("line_cost").children;
  let sum = 0;
  
  for( let i = 0 ; i < costs.length ; i ++) {
    sum += parseInt(costs[i].innerHTML);
  }
  
  setST(sum, "sub_total");
}

// Subtotal getter and setter
function setST(sum, item_id) {
  document.getElementById(item_id).innerHTML = sum.toFixed(2);
  calcDeliveryCharge();
}

function getSubTotal() {
  return document.getElementById("sub_total").innerHTML;
}

function calcDeliveryCharge() {
  const subTotal = getSubTotal();
  setDeliveryCharge("delivery_charge", subTotal < 100 ? subTotal * 0.10 : 0);
}

function setDeliveryCharge(item_id, deliveryCharge){
  document.getElementById(item_id).innerHTML = deliveryCharge.toFixed(2);
  //calculateTAX();
}

function getDeliveryCharge() {
  return document.getElementById("delivery_charge").innerHTML;
}

calcSubtotal();
calcDeliveryCharge();

<line_cost>
  <div>5</div>
  <div>4</div>
  <div>3</div>
  <div>20</div>
</line_cost>
<br/>
<div>
  <span>Sub Total: $
    <span id="sub_total"></span>
  </span>
  <br/>
  <span>Delivery Charge: $
    <span id="delivery_charge"></span>
  </span>
</div>

否则，如果您有：

<div>
    <line_cost>30</line_cost>
    <line_cost>40</line_cost>
    ...
</div>

然后执行以下操作：

function calcSubtotal() {
  const costs = document.querySelectorAll("line_cost");
  let sum = 0 
  
  for( let i = 0 ; i < costs.length ; i ++) {
    sum += parseFloat(costs[i].innerHTML);
  }
  
  setST(sum, "sub_total");
}

// Subtotal getter and setter
function setST(sum, item_id) {
  document.getElementById(item_id).innerHTML = sum.toFixed(2);
  calcDeliveryCharge();
}

function getSubTotal() {
  return document.getElementById("sub_total").innerHTML;
}

function calcDeliveryCharge() {
  const subTotal = getSubTotal();
  setDeliveryCharge("delivery_charge", subTotal < 100 ? subTotal * 0.10 : 0);
}

function setDeliveryCharge(item_id, deliveryCharge){
  document.getElementById(item_id).innerHTML = deliveryCharge.toFixed(2);
  //calculateTAX();
}

function getDeliveryCharge() {
  return document.getElementById("delivery_charge").innerHTML;
}

calcSubtotal();
calcDeliveryCharge();

line_cost {
  display: block;
}

<div>
  <line_cost>25</line_cost>
  <line_cost>34</line_cost>
  <line_cost>43</line_cost>
  <line_cost>250</line_cost>
</div>
<br/>
<div>
  <span>Sub Total: $
    <span id="sub_total"></span>
  </span>
  <br/>
  <span>Delivery Charge: $
    <span id="delivery_charge"></span>
  </span>
</div>

innerHTML不会动态更新或显示在PHP页面上-JavaScript

2 个答案: