javascript - 我想使用 JS/HTML 明智地计算我的调查部分的分数？

Question

我正在使用 JS/HTML 创建一项调查，并希望明智地计算调查部分的分数和百分比，就像一个部分有 3 个问题而另一部分有 4 个问题，所以应该以这种方式计算分数和百分比。我正在给出代码这是我创建的，但它只适用于一个部分。表单.html

function displayRadioValue() {

  var ele = document.getElementsByTagName('input');
  let total = 0
  let res = ''
  let totalNumQuestions = 0
  for (i = 0; i < ele.length; i++) {

    if (ele[i].type = "radio") {

      if (ele[i].checked) {
        totalNumQuestions++
        total += parseFloat(ele[i].value)

        res += ele[i].name + " Value: " + ele[i].value + "<br>";
      }
    }



  }
  res += "Total: " + total + "<br>"
  res += "Percentage: " + ((total / (totalNumQuestions * 3)) *
    100).toFixed(2) + "%"

  document.getElementById("result").innerHTML = res
}
`

<p>
  Select a radio button and click on Submit.
</p>
<h2>Section 1</h2>
<h3>question 1: </h3>
<input type="radio" name="question1" value="1">1
<input type="radio" name="question1" value="2">2
<input type="radio" name="question1" value="3">3

<br> question 2:
<input type="radio" name="question2" value="1">1
<input type="radio" name="question2" value="2">2
<input type="radio" name="question2" value="3">3

<br> question 3:
<input type="radio" name="question3" value="1">1
<input type="radio" name="question3" value="2">2
<input type="radio" name="question3" value="3">3

<br>

<h2>Section 2</h2>
<h3>question 1: </h3>
<input type="radio" name="question1" value="1">1
<input type="radio" name="question1" value="2">2
<input type="radio" name="question1" value="3">3

<br> question 2:
<input type="radio" name="question2" value="1">1
<input type="radio" name="question2" value="2">2
<input type="radio" name="question2" value="3">3
<br> question 3:
<input type="radio" name="question3" value="1">1
<input type="radio" name="question3" value="2">2
<input type="radio" name="question3" value="3">3
<br> question 4:
<input type="radio" name="question4" value="1">1
<input type="radio" name="question4" value="2">2
<input type="radio" name="question4" value="3">3

<button type="button" onclick="displayRadioValue()"> 
        Submit 
    </button>

<br>

<div id="result"></div>

标签： javascripthtml

Answer 1

这是适合您的完整工作代码。首先，您需要each单独包装部分，以便我们也div可以调用它们separatelycalculation

您可以使用querySelecterAllmethod 和 useforEach来获取每个部分按钮每个部分checked的所有值。radio

存储每个部分total并percentage分别显示在section.

要获得百分比，我们需要将总数除以totalQuestions100，然后再除以 100 并使用toFixed()函数来获得实际percentage的 in decimals。

您的 HTML 中也需要一些HTML修复，我也已修复。

现场工作演示：

function displayRadioValue() {
  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let section1Res = document.querySelector('.section-1-results')
  let section2Res = document.querySelector('.section-2-results')
  let result1 = ''
  let result2 = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      section2Total += +radio.value
    }
  })

  //Section 1
  result1 += "<b>Results:</b><br>"
  result1 += "Total: " + section1Total + "<br>"
  result1 += "Percentage: " + ((section1Total / (section2Question * 3)) * 100).toFixed(2) + "%"
  section1Res.innerHTML = result1

  //Section 2
  result2 += "<b>Results:</b><br>"
  result2 += "Total: " + section2Total + "<br>"
  result2 += "Percentage: " + ((section2Total / (section2Question * 3)) * 100).toFixed(2) + "%"
  section2Res.innerHTML = result2

}

<p>
  Select a radio button and click on Submit.
</p>
<div class="section-1">

  <h2>Section 1</h2>
  question 1:
  <input type="radio" name="question1" value="1">1
  <input type="radio" name="question1" value="2">2
  <input type="radio" name="question1" value="3">3

  <br> question 2:
  <input type="radio" name="question2" value="1">1
  <input type="radio" name="question2" value="2">2
  <input type="radio" name="question2" value="3">3

  <br> question 3:
  <input type="radio" name="question3" value="1">1
  <input type="radio" name="question3" value="2">2
  <input type="radio" name="question3" value="3">3

</div>
<br>
<div class="section-1-results"></div>

<div class="section-2">

  <h2>Section 2</h2>
  question 1:
  <input type="radio" name="question4" value="1">1
  <input type="radio" name="question4" value="2">2
  <input type="radio" name="question4" value="3">3

  <br> question 2:
  <input type="radio" name="question5" value="1">1
  <input type="radio" name="question5" value="2">2
  <input type="radio" name="question5" value="3">3
  <br> question 3:
  <input type="radio" name="question6" value="1">1
  <input type="radio" name="question6" value="2">2
  <input type="radio" name="question6" value="3">3
  <br> question 4:
  <input type="radio" name="question7" value="1">1
  <input type="radio" name="question7" value="2">2
  <input type="radio" name="question7" value="3">3
</div>
<br>

<div class="section-2-results"></div>

<br>

<button type="button" onclick="displayRadioValue()">
  Submit
</button>