У меня есть таблица с тремя столбцами: товар, цена и флажок. Я хочу рассчитать промежуточный итог, но включить только цены с установленным флажком. Код, который у меня есть до сих пор, представляет собой смесь различных битов, которые работают сами по себе; однако прямо сейчас я получаю сообщение об ошибке «TypeError: невозможно прочитать свойства undefined (чтение 'innerHTML')». Что я делаю неправильно?

function calculate() {
  const ele = document.getElementsByTagName('input');
  let table = document.getElementById("myTable");
  let tr = table.getElementsByTagName("tr");
  let subTotal = 0;
  for (var i = 0; i < ele.length; i++) {
    let td = tr[i].getElementsByTagName("td")[1];
    let price = td[i].innerHTML;
    if (ele[i].type == 'checkbox' && ele[i].checked == true)
      subTotal += price;
  }
  document.getElementById("val").innerHTML = "The subtotal is " + subTotal;
}
<!DOCTYPE html>
<html>

<body>

  <table id="myTable">
    <tr>
      <td>T-Shirt</td>
      <td>9.99</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>Pants</td>
      <td>49.99</td>
      <td><input type="checkbox"></td>
    </tr>
  </table>
  <span id="val">The subtotal is 0</span>
  <button onclick="calculate()">Calculate subtotal</button>

</html>
0
vauss 11 Окт 2021 в 22:50

3 ответа

Лучший ответ

Вы должны изменить строку td[i], потому что она не определена, как подсказывает ошибка. Итак, рассмотрите возможность использования чистого td и доступа к его innerText. Он вернет строку со значением, которое вы должны преобразовать в число с плавающей запятой с помощью parseFloat. Наконец, вы должны установить точность, которую хотите subTotal, чтобы она печатала с нужным вам количеством десятичных знаков.

function calculate() {
  const ele = document.getElementsByTagName('input');
  let table = document.getElementById("myTable");
  let tr = table.getElementsByTagName("tr");
  let subTotal = 0;
  for (var i = 0; i < ele.length; i++) {
    let td = tr[i].getElementsByTagName("td")[1];
    let price = parseFloat(td.innerText); // change here
    if (ele[i].type == 'checkbox' && ele[i].checked == true)
      subTotal += price;
  }
  document.getElementById("val").innerHTML = "The subtotal is " + subTotal.toFixed(2); // and set precision here
}
<!DOCTYPE html>
<html>

<body>

  <table id="myTable">
    <tr>
      <td>T-Shirt</td>
      <td>9.99</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>Pants</td>
      <td>49.99</td>
      <td><input type="checkbox"></td>
    </tr>
  </table>
  <span id="val">The subtotal is: </span>
  <button onclick="calculate()">Calculate subtotal</button>

</html>
0
testing_22 11 Окт 2021 в 20:02

Проблема с вашим кодом проста. Вы сослались на td, а затем пытаетесь сослаться на него снова.

let td = tr[i].getElementsByTagName("td")[1];
let price = td[i].innerHTML;

Должно быть

const td = tr[i].getElementsByTagName("td")[1];
const price = td.innerHTML;

Если вы используете значение для флажка, вы можете просто перебрать отмеченные входные данные и вычислить общую сумму, используя значения. Нет необходимости искать содержимое ячеек.

function calculate() {
   const checkedInputs = document.querySelectorAll("#myTable input:checked");
   const total = Array.from(checkedInputs).reduce(function(total, cb) {
     return total + +cb.value;
  }, 0);
  document.querySelector("#val").textContent = "The subtotal is " + total.toFixed(2);
}
<table id="myTable">
    <tr>
      <td>T-Shirt</td>
      <td>9.99</td>
      <td><input type="checkbox" value="9.99"></td>
    </tr>
    <tr>
      <td>Pants</td>
      <td>49.99</td>
      <td><input type="checkbox" value="49.99"></td>
    </tr>
  </table>
  <span id="val">The subtotal is 0</span>
  <button onclick="calculate()">Calculate subtotal</button>
0
epascarello 11 Окт 2021 в 20:16

Вы можете перебирать чекбокс и подниматься до предыдущего td

function calculate() {
    let chckboxes = document.querySelectorAll('#myTable input:checked');
    let sum = 0;
    chckboxes.forEach((itm) => {
        let val = parseFloat(itm.parentElement.previousElementSibling.innerHTML)
                sum += val;
    });

    document.getElementById("val").innerHTML = "The subtotal is " + sum;
}
<!DOCTYPE html>
<html>

<body>

  <table id="myTable">
    <tr>
      <td>T-Shirt</td>
      <td>9.99</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>Pants</td>
      <td>49.99</td>
      <td><input type="checkbox"></td>
    </tr>
  </table>
  <span id="val">The subtotal is 0</span>
  <button onclick="javascript:calculate()">Calculate subtotal</button>

</html>
0
Sim1-81 11 Окт 2021 в 20:22