Как отображать расчеты в HTML-форме, используя JavaScript

Question

У меня есть краткая форма в HTML, и в основном она вычисляет результаты ввода пользователей. У меня 4 раздела, раздел а.1, а.2, б.1, б.2. Я хочу иметь возможность добавить сумму сечения a.1 и отобразить ее в строке промежуточных итогов, то же самое касается сечения a.2, b.1 и b.2. Наконец, я хотел бы подвести итоги по сумме начисленных баллов и отобразить ее в строке итогов в сводной таблице в верхней части страницы. Пожалуйста, запустите мой код, и любые советы или фрагменты кода приветствуются. Я хотел бы сохранить структуру моего кода. Я новичок в javascript и хотел бы получить несколько советов, которые помогут мне понять. Спасибо!

var sections = {
  section_a: 0,
  section_b: 0,

}

//Calculates Section A
function calcSectionA(section) {
  let sum = 0;
  //Queries All <Select> and looks for class = "select section_a" and add each selected option and assings it to sum
  document.querySelectorAll('select.' + section)
    .forEach((input) => {
      sum += parseInt(input.options[input.selectedIndex].value);
    });
  sections[section] = sum;
  document.getElementById('total_' + section).textContent = sum;
  document.getElementById('summary_' + section).textContent = sum
  document.getElementById('percent_' + section).textContent = Math.ceil(sum / 8 * 100) + '%';
  calcRanks();

}

//Calculates Section B
function calcSectionB(section) {
  let sum = 0;
  //Queries All <Select> and looks for class = "select section_b" and add each selected option and assings it to sum
  document.querySelectorAll('select.' + section)
    .forEach((input) => {
      sum += parseInt(input.options[input.selectedIndex].value);
    });
  sections[section] = sum;
  document.getElementById('total_' + section).textContent = sum;
  document.getElementById('summary_' + section).textContent = sum
  document.getElementById('percent_' + section).textContent = Math.ceil(sum / 4 * 100) + '%';
  calcRanks();

}

function calcRanks() {
  let sectionsArr = [];
  let keys = Object.keys(sections);
  keys.forEach((key, i) => {
    sectionsArr.push({
      section: key,
      value: sections[key],
      rank: 0
    });
    if (i + 1 === keys.length) {
      sectionsArr.sort((a, b) => {
        return a.value > b.value ? -1 : a.value < b.value ? 1 : 0
      });
      let lastIndex = 0;
      for (let i = 1; i < sectionsArr.length; i++) {
        let section = sectionsArr[i];
        let lastSection = sectionsArr[lastIndex];
        //console.log(lastSection.value, section.value);
        if (lastSection.value > section.value) {
          sectionsArr[i].rank = lastSection.rank + 1;
        }
        if (lastSection.value === section.value) {
          sectionsArr[i].rank = lastSection.rank;
        }
        lastIndex = i;
      }
      displayRanks(sectionsArr);
    }
  });
}

function displayRanks(sections) {
  sections.forEach((section) => {
    document.getElementById('rank_' + section.section).textContent = section.rank + 1;
  });
}

<table>
  <tr>
    <th>Category</th>
    <th>Points Possible</th>
    <th>Points Awarded</th>
    <th>Percent Achieved</th>
    <th>Ranking</th>
  </tr>
  <tr>
    <td align="center">A</td>
    <td align="center">60</td>
    <td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
    <td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
    <td bgcolor="#92d050" align="center" id="rank_section_a"></td>
  </tr>
  <tr>
    <td align="center">B</td>
    <td align="center">50</td>
    <td align="center"><b><div><span id="summary_section_b"></span></div></td>
               <td align="center"><b><div><span id="percent_section_b"></span></div></td>
               <td bgcolor="#92d050" align="center" id="rank_section_b"></td>
             </tr>
             <tr>
                   <td align="right"><b>Totals=</b></td>
    <td align="center"><b></b></td>
    <td align="center"><b><div></div></b></td>
    <td align="center"><b><div><span id="TotalPercent"></span></div></b></td>
    <td align="center"></td>

  </tr>
</table>

<table>

  <th>Section A.1</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id=""></div></b></td>
  </tr>
  <th>Section A.2</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id=""></div></b></td>
  </tr>
  <tr>
    <td class="subtotal">Section A. Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="total_section_a"></div></b></td>
  </tr>

  <th>Section B.1</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id=""></div></b></td>
  </tr>
  <th>Section B.2</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id=""></div></b></td>
  </tr>
  <tr class="blueHead">
    <td class="subtotal">Section B. Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="total_section_b"></div></b></td>
  </tr>
</table>

Answer 1

Я дал число ваших div и некоторых span тегов id атрибутов. В ваших функциях onchange я просто собрал значения ddls и суммировал их для отдельных итогов для разделов A и B. Затем в верхней части таблицы я просто взял эти два числа и суммировал их в вашей функции onchange, поэтому каждый раз, когда вы меняете значение, сумма будет обновляться. Это не лучший способ дать значения вашим элементам, но это должно помочь вам встать на правильный путь. Надеюсь, это поможет

var sections = {
  section_a: 0,
  section_b: 0,

}

//Calculates Section A
function calcSectionA(section) {
  let sum = 0;
  //Queries All <Select> and looks for class = "select section_a" and add each selected option and assings it to sum
  document.querySelectorAll('select.' + section)
    .forEach((input) => {
      sum += parseInt(input.options[input.selectedIndex].value);
    });
  sections[section] = sum;
  document.getElementById('total_' + section).textContent = sum;
  document.getElementById('summary_' + section).textContent = sum
  document.getElementById('percent_' + section).textContent = Math.ceil(sum / 8 * 100) + '%';
  calcRanks();
  var a1Q1 = document.getElementById('a1').value;
  var a1Q2 = document.getElementById('a2').value;
  document.getElementById('section_a1subTotal').textContent = parseInt(a1Q1) + parseInt(a1Q2);
  var a2Q1 = document.getElementById('a3').value;
  var a2Q2 = document.getElementById('a4').value;
  document.getElementById('section_a2subTotal').textContent = parseInt(a2Q1) + parseInt(a2Q2);
  var aTotals = document.getElementById('summary_section_a').textContent;
  var bTotals = document.getElementById('summary_section_b').textContent;
  if (aTotals !== "" && bTotals !== "") {
    document.getElementById('totalNum').textContent = parseInt(aTotals) + parseInt(bTotals);
  }
}

//Calculates Section B
function calcSectionB(section) {
  let sum = 0;
  //Queries All <Select> and looks for class = "select section_b" and add each selected option and assings it to sum
  document.querySelectorAll('select.' + section)
    .forEach((input) => {
      sum += parseInt(input.options[input.selectedIndex].value);
    });
  sections[section] = sum;
  document.getElementById('total_' + section).textContent = sum;
  document.getElementById('summary_' + section).textContent = sum
  document.getElementById('percent_' + section).textContent = Math.ceil(sum / 4 * 100) + '%';
  calcRanks();
  var b1Q1 = document.getElementById('b1').value;
  var b1Q2 = document.getElementById('b2').value;
  document.getElementById('section_b1subTotal').textContent = parseInt(b1Q1) + parseInt(b1Q2);
  var b2Q1 = document.getElementById('b3').value;
  var b2Q2 = document.getElementById('b4').value;
  document.getElementById('section_b2subTotal').textContent = parseInt(b2Q1) + parseInt(b2Q2);
  var aTotals = document.getElementById('summary_section_a').textContent;
  var bTotals = document.getElementById('summary_section_b').textContent;
  if (aTotals !== "" && bTotals !== "") {
    document.getElementById('totalNum').textContent = parseInt(aTotals) + parseInt(bTotals);
  }
}



function calcRanks() {
  let sectionsArr = [];
  let keys = Object.keys(sections);
  keys.forEach((key, i) => {
    sectionsArr.push({
      section: key,
      value: sections[key],
      rank: 0
    });
    if (i + 1 === keys.length) {
      sectionsArr.sort((a, b) => {
        return a.value > b.value ? -1 : a.value < b.value ? 1 : 0
      });
      let lastIndex = 0;
      for (let i = 1; i < sectionsArr.length; i++) {
        let section = sectionsArr[i];
        let lastSection = sectionsArr[lastIndex];
        //console.log(lastSection.value, section.value);
        if (lastSection.value > section.value) {
          sectionsArr[i].rank = lastSection.rank + 1;
        }
        if (lastSection.value === section.value) {
          sectionsArr[i].rank = lastSection.rank;
        }
        lastIndex = i;
      }
      displayRanks(sectionsArr);
    }
  });
}

function displayRanks(sections) {
  sections.forEach((section) => {
    document.getElementById('rank_' + section.section).textContent = section.rank + 1;
  });
}

<table>
  <tr>
    <th>Category</th>
    <th>Points Possible</th>
    <th>Points Awarded</th>
    <th>Percent Achieved</th>
    <th>Ranking</th>
  </tr>
  <tr>
    <td align="center">A</td>
    <td align="center">60</td>
    <td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
    <td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
    <td bgcolor="#92d050" align="center" id="rank_section_a"></td>
  </tr>
  <tr>
    <td align="center">B</td>
    <td align="center">50</td>
    <td align="center"><b><div><span id="summary_section_b"></span></div></td>
               <td align="center"><b><div><span id="percent_section_b"></span></div></td>
               <td bgcolor="#92d050" align="center" id="rank_section_b"></td>
             </tr>
             <tr>
                   <td align="right"><b>Totals=</b></td>
    <td align="center" id="totalNum"><b></b></td>
    <td align="center"><b><div></div></b></td>
    <td align="center"><b><div><span id="TotalPercent"></span></div></b></td>
    <td align="center"></td>

  </tr>
</table>

<table>

  <th>Section A.1</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select id="a1" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select id="a2" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="section_a1subTotal"></div></b></td>
  </tr>
  <th>Section A.2</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select id="a3" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select id="a4" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="section_a2subTotal"></div></b></td>
  </tr>
  <tr>
    <td class="subtotal">Section A. Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="total_section_a"></div></b></td>
  </tr>

  <th>Section B.1</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select id="b1" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select id="b2" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="section_b1subTotal"></div></b></td>
  </tr>
  <th>Section B.2</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select id="b3" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select id="b4" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="section_b2subTotal"></div></b></td>
  </tr>
  <tr class="blueHead">
    <td class="subtotal">Section B. Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="total_section_b"></div></b></td>
  </tr>
</table>

jsfiddle: https://jsfiddle.net/q28yk4j0/1/