Блог

Главная - Вопросы по программированию - Как подсчитать цену каждого товара с учетом количества товаров?

Как подсчитать цену каждого товара с учетом количества товаров?

#javascript #ajax #xml #count

#javascript #ajax #xml #подсчитать

Вопрос:

У меня есть XML-запрос, который возвращает таблицу меню, как показано в 1-й таблице. Вот мой фрагмент кода:

 HTML

<body>
    <h1>Food Menu</h1>
    <button type="button" onclick="simpleXML()">Show the Menu</button>
    <br><br>
    <table id="menu-table"></table>
    <br>
    <div id="btn2"></div>
    <br>
    <table id="menu-count-table"></table>
    <br><br>
    <script src="script.js"></script>
</body>

JS

    function simpleXML() {
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 amp;amp; 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="<tr><th>name</th><th>price</th><th>description</th><th>calories</th></tr>";
  let x = xmlDoc.getElementsByTagName("food");
  for (i = 0; i <x.length; i  ) { 
    menuTable  = "<tr><td>"  
    x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue  
    "</td><td>"  
    x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue  
    "</td><td>"  
    x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue  
    "</td><td>"  
    x[i].getElementsByTagName("calories")[0].childNodes[0].nodeValue  
    "</td></tr>";
  }
  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();
  };
}

Мой код возвращает XML-документ, как в 1-й таблице на фотографии, и после нажатия кнопки сделать заказ он возвращает вторую таблицу, но без подсчета и сводки. Как добавить количество сводных строк?

Комментарии:

1. Привет, как создается вторая таблица? можете ли вы добавить html-код и для этого?

2. Я буду обновлять. На данный момент я просто помещаю вместо count и summary просто текст. Я пытаюсь практиковаться в w3schools

3. Я обновил фрагмент кода

4. Кроме того, summary есть price * count ?

5. да, сводка — это цена * количество. Я не знаю, как добавить счетчик для увеличения количества товаров

Ответ №1:

Вам нужно перебрать все trs, чтобы получить общее количество count summary столбцов и.Сначала, когда вы добавляете trs к #menu-count-table вам addEventListener , вам нужно ко всем входным данным поместить эту часть кода внутри menu функции, а также в ваш count столбец <input type="number"> , который также должен быть изменен.

Теперь всякий раз, когда count ввод получает calculate функцию изменения, будет вызываться.Там, как вы можете видеть в приведенном ниже коде, я провел цикл trs использования for-loop и выполнил вычисления, получив значения из tds и, наконец, добавил конечный результат внутри spans тега.

Демонстрационный код (с фиктивными данными):

 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);


}  
 <table id="menu-count-table" border="1">
  <tr>
    <th>name</th>
    <th>price</th>
    <th>description</th>
    <th>calories</th>
    <th>count</th>
    <th>summary</th>
  </tr>
  <tr>
    <td>A</td>
    <td>5.5</td>
    <td>abcd..</td>
    <td>50</td>
    <!--for taking count-->
    <td><input class="count" min="1" type="number" value="3"></td>
    <td>15</td>
  </tr>
  <tr>
    <td>B</td>
    <td>5.4</td>
    <td>acebcd..</td>
    <td>54</td>
    <td><input class="count" min="1" type="number" value="3"></td>
    <td>15</td>
  </tr>
  <tr>
    <td>C</td>
    <td>6.2</td>
    <td>abcfrfrd..</td>
    <td>540</td>
    <td><input class="count" min="1" type="number" value="3"></td>
    <td>18</td>
  </tr>
  <tr>
    <td>D</td>
    <td>3.8</td>
    <td>abcd..</td>
    <td>503</td>
    <td><input class="count" min="1" type="number" value="3"></td>
    <td>9</td>
  </tr>
  <tr>
    <td colspan="4"></td>
    <td>Count : <span id="count"></span></td>
    <td>Summary : <span id="summary"></span></td>
  </tr>
</table>