Tengo un formulario simple en HTML. Hay 3 secciones (Sección A, B y C). A medida que el usuario rellena el formulario, cada sección se calcula mostrando el total de puntos y el porcentaje. Me gustaría clasificar las puntuaciones y mostrarlas en la columna de clasificación, pero no parece averiguar cómo hacerlo. Por ejemplo, si la Sección A tiene 4 puntos y la Sección B tiene 3 puntos y la Sección C tiene 0 puntos, la sección A tendría el rango de 1, la sección B tendría el rango de 2 y la sección C tendría el rango de 3. También tener el cambio de clasificación a medida que se llena el formulario sería ideal.

Soy nuevo en JavaScript, esta es una tarea para la clase que estoy tomando actualmente. Estoy teniendo problemas sobre cómo implementar lógicamente esto. Esto es sólo una muestra de mi formulario. Realmente tengo una forma mucho más grande con más secciones y preguntas. Por favor, ejecute mi código para que pueda ver un mejor visual. Cualquier fragmento de código y consejos que me ayuden serán apreciados. Entiendo que mi código no es el mejor, pero como dije todavía estoy aprendiendo también mi profesor quería que practiquemos la forma en que mi código está estructurado, así que cambiar este código probablemente resultaría en algunas deducciones de puntos por mi profesor. Así que por favor si se dan fragmentos de código por favor mantenga la misma estructura de mi código.

He intentado usar instrucciones if en JavaScript, pero como dije no puedo envolver mi mente sobre cómo hacerlo lógicamente. Te lo agradezco.

    <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="2">2</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>5</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="3">3</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>6</b></td>
           <td align="center"><b><div><span id="totalC"></span></div></b></td>
         </tr>
       </table>

       <script>
       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() / 5 * 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() / 6 * 100) +'%'
       }

       function calcSumC() {
         return calcC1R()
       }

       </script>
0
José Pablo Huizar 4 nov. 2019 a las 18:16

1 respuesta

Qué bien lo has hecho muy bien. Sólo tienes que ordenar

var list = {"A": 100, "B": 75, "C": 116, "D": 15};
keysSorted = Object.keys(list).sort(function(a,b){return list[a]-list[b]})
console.log(keysSorted);

Intente usar la lógica anterior e implementar en el código. Gracias

0
Saud Anjum 5 nov. 2019 a las 06:07