innerHTML динамически не обновляется и не отображается на странице PHP - JavaScript - PullRequest
Новая
       13

innerHTML динамически не обновляется и не отображается на странице PHP - JavaScript

0 голосов
/ 29 октября 2018

Мне удалось динамически отобразить сумму из 6 элементов DOM с линейной стоимостью из файла php. К сожалению, при попытке рассчитать стоимость доставки мои методы JavaScript, связанные с реализацией deliveryCharge, не могут ничего отобразить на странице. Благодаря тому, что методы промежуточного итога работали и отображались идеально, я попытался устранить проблему, предоставив 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;
}

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

Ну, если вы 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>
0 голосов
/ 29 октября 2018

Мне удалось обнаружить, что DOM не был готов к загрузке до вызова метода getST (). Это можно исправить с помощью следующего кода: 

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

К сожалению, стоимость доставки считается «неопознанной». Почему это происходит при изменении метода getST ()?

...