How to count price of each item looking to number of items?

Question

I have XML request which returns table of menu like shown in 1st table. Here is my code snippet:

HTML


    Food Menu
    
    


    
    

    
    

    
    


    


JS

    function simpleXML() {
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      menu(this);
    }
  };
  xmlhttp.open("GET", "https://www.w3schools.com/xml/simple.xml", true);
  xmlhttp.send();
}

function menu(xml) {
  let i;
  let xmlDoc = xml.responseXML;
  let menuTable="namepricedescriptioncalories";
  let x = xmlDoc.getElementsByTagName("food");
  for (i = 0; i " +
    x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
    "" +
    x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue +
    "" +
    x[i].getElementsByTagName("calories")[0].childNodes[0].nodeValue +
    "";
  }
  document.getElementById("menu-table").innerHTML = menuTable;

  const btn = document.createElement("button"); 
  btn.innerHTML = "Make an order";
  document.getElementById("btn2").appendChild(btn);

  btn.onclick = function(){
    simpleXML2();
  };
}

My code returns xml doc like in 1st table in the photo and after clicking make an order it returns second table but without count and summary. How to add count summary rows?

user_10606400 · Answer

You need to loop through all trs to get the total of count and summary columns.First when you append trs to #menu-count-table you need to addEventListener to all input put this part of code inside menu function as well your count column should be change that as well.

Now , whenever count input gets change calculate function will get called .There as you can see in below code i have loop through trs using for-loop and have done calculation by getting values from tds and finally added final result inside spans tag.

Demo Code (with dummy datas):

var rows = document.querySelectorAll("#menu-count-table tr");
calculate();
var elements = document.querySelectorAll("#menu-count-table input")
//add event listerner to all inputs
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('change', calculate);
}

function calculate() {
  var count = 0;
  var summary = 0;
  //loop through tr not from 1 because 1st row is ths..and not last as well
  for (var i = 1; i < rows.length - 1; i++) {
    var items = rows[i].querySelectorAll("td"); //get all tds
    if (items.length === 0) continue;
    sum = parseFloat(items[1].innerHTML * items[4].children[0].value) //count and price mutlipy them
    items[5].innerHTML = sum.toFixed(2); //add new sum to summary column td
    count = count + parseInt(items[4].children[0].value) //add total for both count and summary 
    summary = summary + parseFloat(items[5].innerHTML)

  }
  document.getElementById("count").innerHTML = count; //put result
  document.getElementById("summary").innerHTML = summary.toFixed(2);


}


  
    name
    price
    description
    calories
    count
    summary
  
  
    A
    5.5
    abcd..
    50
    
    
    15
  
  
    B
    5.4
    acebcd..
    54
    
    15
  
  
    C
    6.2
    abcfrfrd..
    540
    
    18
  
  
    D
    3.8
    abcd..
    503
    
    9
  
  
    
    Count : 
    Summary :

How to count price of each item looking to number of items?

1 Answers