У меня есть такая функция:

    calculatetabel1 = function(){
    a1 = document.getElementById('pnpa1').value;
    a2 = document.getElementById('pnpa2').value;
    a3 = document.getElementById('pnpa3').value;
    a4 = document.getElementById('pnpa4').value;
    a5 = document.getElementById('pnpa5').value;


document.getElementById('totalpnp1').value =parseInt(a1)+parseInt(a2)+parseInt(a3)+parseInt(a4)+parseInt(a5);
        }

Эта функция отлично работает, используя onkeyup="calculatetabel1()".

Допустим, у меня есть 20 столбцов и строк. Как мне вызвать эту функцию без заполнения 20 столбцов и строк? (только 1 столбец будет делать)

Я уже пробовал document.addEventListener("DOMContentLoaded", function(event) { calculatetabel1(); Это не работает, как я ожидал.

0
Yosafat Wahyu 21 Дек 2019 в 05:58

2 ответа

Лучший ответ

Если вы хотите запускать эту функцию всякий раз, когда любое из полей изменилось, без необходимости прикреплять onkeyup к каждому из них, вы можете сделать что-то вроде этого:

const form = document.getElementById("pnpForm");
form.addEventListener("input", function() {

  let values = [];
  const inputs = form.getElementsByTagName("input");
  [...inputs].forEach(input => {
    if (input.value && input.value !== '' && !input.readOnly) {
      values.push(input.value);
    }
  });

  form.querySelectorAll('[readonly]')[0].value = values.reduce((a, b) => parseInt(a) + parseInt(b), 0);

});
<form id="pnpForm">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text" readonly>
</form>

Это может быть дополнительно обобщено для поддержки нескольких таблиц без какой-либо дополнительной логики:

const forms = document.getElementsByTagName("form");
[...forms].forEach(form => {
  form.addEventListener("input", function() {

    let values = [];
    const inputs = form.getElementsByTagName("input");
    [...inputs].forEach(input => {
      if (input.value && input.value !== '' && !input.readOnly) {
        values.push(input.value);
      }
    });

    form.querySelectorAll('[readonly]')[0].value = values.reduce((a, b) => parseInt(a) + parseInt(b), 0);

  });
});
<h3>Table 1</h3>
<form id="table1">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text" readonly>
</form>

<h3>Table 2</h3>
<form id="table2">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text" readonly>
</form>
2
Michael Rodriguez 21 Дек 2019 в 04:08

Может быть, этот код, похоже, работает так же, как тот, который вы поставили выше:

calculatetabel1 = function() {
  // got an array of document.getElementById('pnpa ... ').value
  const arr = Array.from({ length: 5 }).map( (_, i) => {
    const idToGet = `pnpa${i+1}`;
    return document.getElementById(idToGet).value;
  });

  // calculate total
  const total = arr.reduce( (a, b) => {
    return parseInt(a) + parseInt(b);
  }, 0);

  // assign to #totalpnp1
  document.getElementById('totalpnp1').value = total;
}
0
Loi Nguyen Huynh 21 Дек 2019 в 03:19