Html Question posted in
Some basic documentation can be found here.

How do I make an HTML radio button form change the value in another box?

I am trying to make a rubric using radio buttons. So far, I have a form with radio buttons and a section at the top for the grade. I’m wondering if there is a way to program the grade section to automatically fill in with the percent of how many "GO" buttons are clicked.

I know the form looks a little wonky right now, but that was done quickly to adjust for showing what I’m talking about.

I’m pretty new to HTML and I feel like all of my Googling attempts have been fruitless thus far. Hopefully someone can help me out. Or tell me I’m just plain wrong and steer me in the right direction.enter image description here

Tags:

2

Answers


  1. 0

    As you didn’t provide your code and there are not enough details of "How grades should work?" or "What is the purpose of grades?". So, I build a concept that if a user clicks on Go then grades will count up and if the user clicks on No-Go then it will count down. I used JavaScript to handle user interaction. You can adjust the concept according to your desire.

    Here is the code:

    document.addEventListener("DOMContentLoaded", function () {
  let goCount = 0;
  let noGoCount = 0;

  const currentSelection = {
    thing_1: null,
    thing_2: null,
    thing_3: null,
  };

  function updateGrade() {
    const grade = Math.max(goCount - noGoCount, 0);
    document.getElementById("grades").textContent = grade;
  }

  const radios = document.querySelectorAll("input[type=radio]");
  radios.forEach((radio) => {
    radio.addEventListener("change", function () {
      const question = this.name;
      const value = this.value;

      if (currentSelection[question] === "1") {
        goCount--;
      } else if (currentSelection[question] === "0") {
        noGoCount--;
      }

      currentSelection[question] = value;

      if (value == "1") {
        goCount++;
      } else if (value == "0") {
        noGoCount++;
      }

      updateGrade();
    });
  });
});
    .grade-container {
  display: flex;
  gap: 5px;
}

#grades {
  border: 1px solid gray;
  width: 50px;
  padding: 0 0 0 3px;
}

.performance-container {
  padding: 0 50px;
}

.question-container {
  border: 1px solid gray;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.question-container p {
  padding: 0;
  margin: 0;
}

.inputs-container {
  display: flex;
  gap: 20px;
  align-items: center;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Grading System</title>
  </head>
  <body>
    <div class="grade-container">
      <div>Grade</div>
      <div id="grades">0</div>
    </div>

    <p>Do all the stuff you're meant to do.</p>

    <div class="performance-container">
      <h3>Performance Measures</h3>

      <div class="question-container">
        <p>Thing 1</p>

        <div class="inputs-container">
          <div>
            <input type="radio" value="1" name="thing_1" />
            <label>Go</label>
          </div>
          <div>
            <input type="radio" value="0" name="thing_1" />
            <label>No-Go</label>
          </div>
        </div>
      </div>

      <div class="question-container">
        <p>Thing 2</p>

        <div class="inputs-container">
          <div>
            <input type="radio" value="1" name="thing_2" />
            <label>Go</label>
          </div>
          <div>
            <input type="radio" value="0" name="thing_2" />
            <label>No-Go</label>
          </div>
        </div>
      </div>

      <div class="question-container">
        <p>Thing 3</p>

        <div class="inputs-container">
          <div>
            <input type="radio" value="1" name="thing_3" />
            <label>Go</label>
          </div>
          <div>
            <input type="radio" value="0" name="thing_3" />
            <label>No-Go</label>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    It can be done with some JavaScript. You’ll need to select the HTML elements for where the percentage value goes, the form, and all of the radio inputs marked "Go". Then you can assign an anonymous function to the onchange property of the form element, count the number of "Go" inputs that are selected (their checked property will be set to true), then do the math and assign the result to the innerText property of the element for the percentage value.

    This example does what you want:

    <!DOCTYPE html>
<html>
  <head>
    <title>Grade Calculator</title>
  </head>
  <body>
    <h1>Grade Calculator</h1>
    <h2>Grade = <span id="grade">0</span>%</h2>
    <form id="form" action="#">
      <section>
        <h3>Thing 1</h3>
        <p><input type="radio" name="thing-1" value="go" /> Go</p>
        <p><input type="radio" name="thing-1" value="no-go" /> No-Go</p>
      </section>
      <section>
        <h3>Thing 2</h3>
        <p><input type="radio" name="thing-2" value="go" /> Go</p>
        <p><input type="radio" name="thing-2" value="no-go" /> No-Go</p>
      </section>
      <section>
        <h3>Thing 3</h3>
        <p><input type="radio" name="thing-3" value="go" /> Go</p>
        <p><input type="radio" name="thing-3" value="no-go" /> No-Go</p>
      </section>
    </form>
    <script>
      let gradeElement = document.querySelector('#grade')
      let formElement = document.querySelector('#form')
      let goInputElements = document.querySelectorAll('[value="go"]')
      let totalGoInputs = goInputElements.length

      formElement.onchange = function () {
        let checkedGoInputs = 0
        for (input of goInputElements) if (input.checked) checkedGoInputs++
        let grade = Math.round((checkedGoInputs / totalGoInputs) * 100)
        gradeElement.innerText = grade
      }
    </script>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search