Я создаю один опрос с использованием JS / HTML и хочу подсчитать оценку и% раздела опроса, как будто в одном разделе есть 3 вопроса, а в другом разделе - 4 вопроса, поэтому балл и% должны быть рассчитаны таким образом. Я даю код который я создал, но он работает только для одного раздела. form.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>
-1
jugal 21 Авг 2020 в 07:44

2 ответа

Лучший ответ

Вот вам полностью рабочий код. Сначала вам нужно обернуть раздел each отдельно в div, чтобы мы могли называть их separately также для calculation

Вы можете использовать метод querySelecterAll и forEach, чтобы получить все значения checked каждого раздела, radio кнопок для каждого раздела .

Сохраните каждый раздел total и percentage отдельно, чтобы они отображались под section.

Чтобы получить процент, нам нужно разделить сумму на totalQuestions, затем умножить на 100 и использовать функцию toFixed(), чтобы получить фактическое percentage в decimals.

В ваш HTML также потребовалось несколько исправлений HTML, которые я тоже исправил.

Демонстрационная версия Live Working .

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>
0
AlwaysHelping 21 Авг 2020 в 06:08

В вашем примере вы добавили повторяющееся имя группы для радио ввода, я удалил все незначительные проблемы в вашем коде.

Вот рабочий пример:

var result = {};
var maxOptions = 3;
function displayRadioValue() { 
        document.getElementById("result").innerHTML = ""; 
        var section = document.querySelectorAll('section');
        for(i = 0; i < section.length; i++) {
          result[section[i].id] = {
          totalChecked: 0,
          totalQuestions:0, 
          percent: 0
          };
          var ele = section[i].querySelectorAll('input');
          result[section[i].id].totalQuestions = ele.length/maxOptions;
          for(j = 0; j < ele.length; j++) { 
              if(ele[j].type === "radio" && ele[j].checked) {
                    result[section[i].id].totalChecked++;
 document.getElementById("result").innerHTML += ele[j].name + " Value: " + ele[j].value + "<br>";
              } 
          }
          result[section[i].id].percent = ((result[section[i].id].totalChecked/result[section[i].id].totalQuestions)*100).toFixed(2)+"%";
        }
        
        console.log(result);
    }
<p> 
    Select a radio button and click on Submit. 
</p> 
<section id="section1">
<h2>Section 1</h2>  
<h3>question 1: </h3>
<input type="radio" name="section1_question1" value="1">1 
<input type="radio" name="section1_question1" value="2">2 
<input type="radio" name="section1_question1" value="3">3 
  
<br> 
  
<h3>question 2:</h3>
<input type="radio" name="section1_question2" value="1">1 
<input type="radio" name="section1_question2" value="2">2
<input type="radio" name="section1_question2" value="3">3

<br>
<h3>question 3:</h3>
<input type="radio" name="section1_question3" value="1">1 
<input type="radio" name="section1_question3" value="2">2
<input type="radio" name="section1_question3" value="3">3
</section>
<br> 

<section id="section2">
<h2>Section 2</h2>  
<h3>question 1: </h3>
<input type="radio" name="section2_question1" value="1">1 
<input type="radio" name="section2_question1" value="2">2 
<input type="radio" name="section2_question1" value="3">3 
  
<br> 
  
<h3>question 2:</h3>
<input type="radio" name="section2_question2" value="1">1 
<input type="radio" name="section2_question2" value="2">2
<input type="radio" name="section2_question2" value="3">3
<br>
<h3>question 3:</h3>
<input type="radio" name="section2_question3" value="1">1 
<input type="radio" name="section2_question3" value="2">2
<input type="radio" name="section2_question3" value="3">3
<br>
<h3>question 4:</h3>
<input type="radio" name="section2_question4" value="1">1 
<input type="radio" name="section2_question4" value="2">2
<input type="radio" name="section2_question4" value="3">3
</section>
<button type="button" onclick="displayRadioValue()"> 
    Submit 
</button> 
<br> 
<div id="result"></div>
-2
Yogendra Chauhan 21 Авг 2020 в 05:58