I created a questionnaire (5 questions) html with buttons of type=radio

Ricky
August 9, 2023
97 views
1 vote
2 Answers

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-collapse: collapse;
        }

        table,
        th,
        td {
            border: 1px solid black;
        }

        th,
        td {
            padding: 10px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
        </tr>
        <tr>
            <td><input class="r1" id="r1" type="radio" name="1" value="1" onclick="updatePoints()">Option 1</td>
            <td><input class="r2" id="r2" type="radio" name="1" value="2" onclick="updatePoints1()">Option 2</td>
            <td><input class="r3" id="r3" type="radio" name="1" value="3" onclick="updatePoints2()">Option 3</td>
            <td><input class="r4" id="r4" type="radio" name="1" value="4" onclick="updatePoints3()">Option 4</td>
        </tr>
        <tr>
            <td><input class="r1" type="radio" name="2" value="1" onclick="updatePoints()">Option 5</td>
            <td><input class="r2" type="radio" name="2" value="2" onclick="updatePoints1()">Option 6</td>
            <td><input class="r3" type="radio" name="2" value="3" onclick="updatePoints2()">Option 7</td>
            <td><input class="r4" type="radio" name="2" value="4" onclick="updatePoints3()">Option 8</td>
        </tr>
        <tr>
            <td><input class="r1" type="radio" name="3" value="1" onclick="updatePoints()">Option 9</td>
            <td><input class="r2" type="radio" name="3" value="2" onclick="updatePoints1()">Option 10</td>
            <td><input class="r3" type="radio" name="3" value="3" onclick="updatePoints2()">Option 11</td>
            <td><input class="r4" type="radio" name="3" value="4" onclick="updatePoints3()">Option 12</td>
        </tr>
        <tr>
            <td><input class="r1" type="radio" name="4" value="1" onclick="updatePoints()">Option 13</td>
            <td><input class="r2" type="radio" name="4" value="2" onclick="updatePoints1()">Option 14</td>
            <td><input class="r3" type="radio" name="4" value="3" onclick="updatePoints2()">Option 15</td>
            <td><input class="r4" type="radio" name="4" value="4" onclick="updatePoints3()">Option 16</td>
        </tr>
        <tr>
            <td><input class="r1" type="radio" name="5" value="1" onclick="updatePoints()">Option 17</td>
            <td><input class="r2" type="radio" name="5" value="2" onclick="updatePoints1()">Option 18</td>
            <td><input class="r3" type="radio" name="5" value="3" onclick="updatePoints2()">Option 19</td>
            <td><input class="r4" type="radio" name="5" value="4" onclick="updatePoints3()">Option 20</td>
        </tr>
        <tr>
            <td id="total1"></td>
            <td id="total2"></td>
            <td id="total3"></td>
            <td id="total4"></td>

        </tr>
        <tr>
            <td colspan="4"></td>
        </tr>
    </table>

    <script>


        function updatePoints() {
            var totalPoints = 0;
            var checkboxes = document.querySelectorAll('input[type="radio"].r1:checked')
            checkboxes.forEach(function (checkbox) {
                if ('input[type="radio"].r1:checked') {
                    totalPoints += parseInt(checkbox.value);
                } else {
                    totalPoints -= parseInt(checkbox.value);
                }
            });

            document.getElementById("total1").textContent = totalPoints;
        }
        function updatePoints1() {
            var totalPoints = 0;
            var checkboxes = document.querySelectorAll('input[type="radio"].r2:checked')
            checkboxes.forEach(function (checkbox) {
                if ('input[type="radio"].r2:checked') {
                    totalPoints += parseInt(checkbox.value);
                } else {
                    totalPoints -= parseInt(checkbox.value);
                }
            });

            document.getElementById("total2").textContent = totalPoints;
        }
        function updatePoints2() {
            var totalPoints = 0;
            var checkboxes = document.querySelectorAll('input[type="radio"].r3:checked')
            checkboxes.forEach(function (checkbox) {
                if ('input[type="radio"].r3:checked') {
                    totalPoints += parseInt(checkbox.value);
                } else {
                    totalPoints -= parseInt(checkbox.value);
                }
            });

            document.getElementById("total3").textContent = totalPoints;
        }
        function updatePoints3() {
            var totalPoints = 0;
            var checkboxes = document.querySelectorAll('input[type="radio"].r4:checked')
            checkboxes.forEach(function (checkbox) {
                if ('input[type="radio"].r4:checked') {
                    totalPoints += parseInt(checkbox.value);
                } else {
                    totalPoints -= parseInt(checkbox.value);
                }
            });

            document.getElementById("total4").textContent = totalPoints;
        }

    </script>
</body>

</html>

I created the tabular form with input as radio then add some java script function on click to increment the 7 th row of the table but when i kind a change the radio selection on the same row, it doesn’t decrement the previous incremented value in the corresponding table row of the corresponding column.

here is my html, css and js code :

Answers

that`s a bit over-engineering architecture .. here is how I would do it :

HTML:

<!-- ... your table structure ... -->

<tr>
    <td id="total1"></td>
    <td id="total2"></td>
    <td id="total3"></td>
    <td id="total4"></td>
</tr>

Javascript:

function updatePoints(columnIndex) {
    var totalPoints = 0;
    var checkboxes = document.querySelectorAll(`input[type="radio"].r${columnIndex}:checked`);
    
    checkboxes.forEach(function(checkbox) {
    totalPoints += parseInt(checkbox.value);
    });

    document.getElementById(`total${columnIndex}`).textContent = totalPoints;
}

With this approach, you only need one function updatePoints, and you pass the column index as an argument when calling it from the onclick attribute of each radio button.

Updated radio button example:

<td>
    <input class="r1" id="r1" type="radio" name="1" value="1" onclick="updatePoints(1)">Option 1
</td>

There are many ways to implement this depending on how the page is organized and programming preferences.

Below is my implementation of this in your example code, based on my understanding.

<!DOCTYPE html>
<html>

  <head>
    <style>
      table {
        border-collapse: collapse;
      }

      table,
      th,
      td {
        border: 1px solid black;
      }

      th,
      td {
        padding: 10px;
      }

    </style>
  </head>

  <body>
    <table>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
      </tr>
      <tr>
        <td><input class="r1" id="r1" type="radio" name="1" value="1">Option 1</td>
        <td><input class="r2" id="r2" type="radio" name="1" value="2">Option 2</td>
        <td><input class="r3" id="r3" type="radio" name="1" value="3">Option 3</td>
        <td><input class="r4" id="r4" type="radio" name="1" value="4">Option 4</td>
      </tr>
      <tr>
        <td><input class="r1" type="radio" name="2" value="1">Option 5</td>
        <td><input class="r2" type="radio" name="2" value="2">Option 6</td>
        <td><input class="r3" type="radio" name="2" value="3">Option 7</td>
        <td><input class="r4" type="radio" name="2" value="4">Option 8</td>
      </tr>
      <tr>
        <td><input class="r1" type="radio" name="3" value="1">Option 9</td>
        <td><input class="r2" type="radio" name="3" value="2">Option 10</td>
        <td><input class="r3" type="radio" name="3" value="3">Option 11</td>
        <td><input class="r4" type="radio" name="3" value="4">Option 12</td>
      </tr>
      <tr>
        <td><input class="r1" type="radio" name="4" value="1">Option 13</td>
        <td><input class="r2" type="radio" name="4" value="2">Option 14</td>
        <td><input class="r3" type="radio" name="4" value="3">Option 15</td>
        <td><input class="r4" type="radio" name="4" value="4">Option 16</td>
      </tr>
      <tr>
        <td><input class="r1" type="radio" name="5" value="1">Option 17</td>
        <td><input class="r2" type="radio" name="5" value="2">Option 18</td>
        <td><input class="r3" type="radio" name="5" value="3">Option 19</td>
        <td><input class="r4" type="radio" name="5" value="4">Option 20</td>
      </tr>
      <tr>
        <td id="total1"></td>
        <td id="total2"></td>
        <td id="total3"></td>
        <td id="total4"></td>

      </tr>
      <tr>
        <td colspan="4"></td>
      </tr>
    </table>
    <script>
    // This selects all radio input elements on the page and adds an event listener
    // to each of them that triggers the 'updatePoints' function when any radio button is clicked.
    // It can get tricky if there are other radio buttons with this approach
    // radio buttons can have another attribute such as data attribute to allow only selecting the necessary ones.
      document.querySelectorAll('input[type="radio"]').forEach(function(element, index) {
        element.addEventListener("change", updatePoints)
      });


      function updatePoints() {
        var totalPoints = {}; // An empty object to store the total points for each class.  
        // Select all checked radio inputs, we will recalculate all values.
        var checkboxes = document.querySelectorAll('input[type="radio"]:checked')
        checkboxes.forEach(function(checkbox) {
          classname = checkbox.getAttribute("class");
          value = parseInt(checkbox.value);
          // Update the totalPoints object by adding the value to the appropriate class's total.
          // If the class is encountered for the first time, set its total to the value.
          totalPoints[classname] = totalPoints[classname] + value || value;
        });
        
        // Separated out the update divs to another function.
        displayPoints(totalPoints);
      }

      function displayPoints(totalPoints) {
       // Mapping between radio button classes and total Ids since no direct correlation is possible.
       // Another approach could be to split the '1' from r1 and append 'total' making total1, 2 from r2 and append total, etc.
        var mapping = {
          "r1": "total1",
          "r2": "total2",
          "r3": "total3",
          "r4": "total4"
        };
        for (key in mapping) {
          if (totalPoints[key] == "undefined") {
            // If totalPoints does not have a value for the current class, display blank (can also be set to 0).
            document.getElementById(mapping[key]).textContent = "";
          } else {
            document.getElementById(mapping[key]).textContent = totalPoints[key];
          }
        }
      }

    </script>
  </body>

</html>

This code removes a lot of extra code but adds a little complexity in exchange.

I have added some comments within to code to include my thoughts and add some explanations.

Removed all the onClick functions and replaced them with eventListeners, since we are using only one updatePoints function, it did not feel necessary to have an onClick to call the same function over and over again.

updatePoints function now recalculates points for all the checkboxes so any additions and subtractions are not needed, just how many checkboxes are checked for each column

totalPoints is used as an object to handle all the classes of radio buttons together, rather than using different vars/functions for each class.

This should be further refined and implemented based on your specific requirement.

Please signup or login to give your own answer.

Click here to cancel reply.