Как вы можете ранжировать определенные итоговые значения с помощью JavaScript в форме, встроенной в HTML?

Question

У меня есть простая форма в HTML. Есть 3 раздела (раздел A, B и C). Когда пользователь заполняет форму, каждый раздел рассчитывается путем отображения общего количества баллов и процентов. Я хотел бы оценить результаты и отобразить их в столбце рейтинга, но не могу понять, как это сделать. Например, если раздел A имеет 4 балла, а раздел B имеет 3 балла, а раздел C имеет 0 баллов, то раздел A будет иметь ранг 1, раздел B будет иметь ранг 2, а раздел C будет иметь ранг 3. Такжеизменение рейтинга по мере заполнения формы было бы идеальным.

Я новичок в JavaScript и у меня возникли проблемы с тем, как логически реализовать это. Это всего лишь образец моей формы. У меня действительно гораздо большая форма с большим количеством разделов и вопросов. Пожалуйста, запустите мой код, чтобы вы могли видеть лучше. Будем благодарны за любые фрагменты кода и советы, которые могут мне помочь. Также, если вы можете сохранить мой код как есть, потому что у меня много кода в зависимости от структуры моего кода. Я понимаю, что мой код не самый лучший.

Я пытался использовать операторы if в JavaScript, но, как я уже сказал, я не могу понять, как логически это сделать.

function calcA1R() {
  var Aa1 = document.getElementById('Aa1');
  var Ab1 = document.getElementById('Ab1');
  var Ac1 = document.getElementById('Ac1');

  var Aa1Val = Aa1.options[Aa1.selectedIndex].value;
  var Ab1Val = Ab1.options[Ab1.selectedIndex].value;
  var Ac1Val = Ac1.options[Ac1.selectedIndex].value;

  // returning the sum of the values
  return [parseInt(Aa1Val), parseInt(Ab1Val), parseInt(Ac1Val)].reduce((a, c) => a + c, 0)
}

function calcA1() {
  displaySumA()
}

function displaySumA() {
  document.getElementById('totalA').textContent = calcSumA()
  document.getElementById('TotalASummary').textContent = calcSumA()
  document.getElementById('TotalAPercent').textContent = Math.ceil(calcSumA() / 4 * 100) + '%'
}

function calcSumA() {
  return calcA1R()
}

function calcB1R() {
  var Ba1 = document.getElementById('Ba1');
  var Bb1 = document.getElementById('Bb1');
  var Bc1 = document.getElementById('Bc1');

  var Ba1Val = Ba1.options[Ba1.selectedIndex].value;
  var Bb1Val = Bb1.options[Bb1.selectedIndex].value;
  var Bc1Val = Bc1.options[Bc1.selectedIndex].value;

  // returning the sum of the values
  return [parseInt(Ba1Val), parseInt(Bb1Val), parseInt(Bc1Val)].reduce((a, c) => a + c, 0)
}

function calcB1() {
  displaySumB()
}

function displaySumB() {
  document.getElementById('totalB').textContent = calcSumB()
  document.getElementById('TotalBSummary').textContent = calcSumB()
  document.getElementById('TotalBPercent').textContent = Math.ceil(calcSumB() / 4 * 100) + '%'
}

function calcSumB() {
  return calcB1R()
}

function calcC1R() {
  var Ba1 = document.getElementById('Ca1');
  var Bb1 = document.getElementById('Cb1');
  var Bc1 = document.getElementById('Cc1');

  var Ca1Val = Ca1.options[Ca1.selectedIndex].value;
  var Cb1Val = Cb1.options[Cb1.selectedIndex].value;
  var Cc1Val = Cc1.options[Cc1.selectedIndex].value;

  // returning the sum of the values
  return [parseInt(Ca1Val), parseInt(Cb1Val), parseInt(Cc1Val)].reduce((a, c) => a + c, 0)
}

function calcC1() {
  displaySumC()
}

function displaySumC() {
  document.getElementById('totalC').textContent = calcSumC()
  document.getElementById('TotalCSummary').textContent = calcSumC()
  document.getElementById('TotalCPercent').textContent = Math.ceil(calcSumC() / 4 * 100) + '%'
}

function calcSumC() {
  return calcC1R()
}

<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">4</td>
    <td align="center"><b><div><span id="TotalASummary"></span></div></b></td>
    <td align="center"><b><div><span id="TotalAPercent"></span></div></b></td>
    <td bgcolor="#92d050" align="center"></td>
  </tr>
  <tr>
    <td align="center">B</td>
    <td align="center">4</td>
    <td align="center"><b><div><span id="TotalBSummary"></span></div></td>
           <td align="center"><b><div><span id="TotalBPercent"></span></div></td>
           <td bgcolor="#92d050" align="center"></td>
         </tr>
         <tr>
           <td align="center">C</td>
           <td align="center">4</td>
           <td align="center"><b><div><span id="TotalCSummary"></span></div></td>
           <td align="center"><b><div><span id="TotalCPercent"></span></div></td>
           <td bgcolor="#92d050" align="center"></td>
         </tr>
      </table>
      <table>
        <tr>
          <th>Section A.</th>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
        </tr>
        <tr>
          <td><b>A.1</b></td>
    <td><b>Value</b></td>
    <td><b>Awarded</b></td>
  </tr>
  <tr>
    <td>a)</td>
    <td align="center">1</td>
    <td align="center">
      <select class="select" onChange="calcA1();" id="Aa1">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>b)</td>
    <td align="center">1</td>
    <td align="center">
      <select class="select" onChange="calcA1();" id="Ab1">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>c)</td>
    <td align="center">2</td>
    <td align="center">
      <select class="select" onChange="calcA1();" id="Ac1">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="subtotal">Section A. Total</td>
    <td align="center"><b>4</b></td>
    <td align="center"><b><div><span id="totalA"></span></div></b></td>
  </tr>

  <tr>
    <th>Section B.</th>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td><b>B.1</b></td>
    <td><b>Value</b></td>
    <td><b>Awarded</b></td>
  </tr>
  <tr>
    <td>a)</td>
    <td align="center">1</td>
    <td align="center">
      <select class="select" onChange="calcB1();" id="Ba1">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>b)</td>
    <td align="center">1</td>
    <td align="center">
      <select class="select" onChange="calcB1();" id="Bb1">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>c)</td>
    <td align="center">2</td>
    <td align="center">
      <select class="select" onChange="calcB1();" id="Bc1">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>

  <tr>
    <td class="subtotal">Section B. Total</td>
    <td align="center"><b>4</b></td>
    <td align="center"><b><div><span id="totalB"></span></div></b></td>
  </tr>
  <tr>
    <th>Section C.</th>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td><b>C.1</b></td>
    <td><b>Value</b></td>
    <td><b>Awarded</b></td>
  </tr>
  <tr>
    <td>a)</td>
    <td align="center">1</td>
    <td align="center">
      <select class="select" onChange="calcC1();" id="Ca1">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>b)</td>
    <td align="center">1</td>
    <td align="center">
      <select class="select" onChange="calcC1();" id="Cb1">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>c)</td>
    <td align="center">2</td>
    <td align="center">
      <select class="select" onChange="calcC1();" id="Cc1">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="subtotal">Section C. Total</td>
    <td align="center"><b>4</b></td>
    <td align="center"><b><div><span id="totalC"></span></div></b></td>
  </tr>
</table>

Answer 1

Если я правильно понимаю ваш вопрос, вы просто хотите поместить число в столбец «Ранг» этих трех разделов, основываясь на том, насколько хорошо пользователь выполнил в каждом из них?

Вы должны иметь возможность простосравните текстовое содержимое столбцов «Достигнутый процент» (я полагаю, это то, что вы хотите сравнить).

Вот что я хотел бы сделать (после присвоения верхней таблице идентификатора «результатов»):

function calculateRankings() {
  // grab all the spans that hold the percentages
  const spans = document.querySelectorAll('#results td:nth-child(4) span');

  // make a list of objects, making up a percentage and its corresponding rank column 
  const percentages = [];
  for (const span of spans) {
     percentages.push({
       //some way to select the neighboring rankings column:
       e: span.parentElement.nextSibling, // <<---- YOU'LL HAVE TO CHANGE THIS!!
       p: Number(span.innerText.replace('%', ''))
     });
  }

  // sort based on the percentage field of each object 
  percentages.sort((a, b) => a.p - b.p);

  // place an index based on the order of the list 
  for (let i = 0; i < percentages.length; i++) {
    percentages[i].e.innerText = i + 1;
  }
}

Я не проверял это, но это должно быть хорошее место для начала.