how to put the result of JS/HTML page in table format?

Question

I have created JS/Html page for survey but i want to show the result of survey page in table format after clicking submit button. Right now it is not coming as a table format, the answer is coming section-wise. I want one final answer which come as a table format showing result of individual section and total of both the section. Thanks in advance

Js File :

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 += "Results:
"
result1 += "Total: " + section1Total + "
"
result1 += "Percentage: " + ((section1Total / (section2Question * 3)) * 100).toFixed(2) + "%"
section1Res.innerHTML = result1

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

}

Html Page :


Select a radio button and click on Submit.



Section 1
question 1:
1
2
3


 question 2:
1
2
3


 question 3:
1
2
3








 Section 2
 question 1:
 1
 2
 3

 
 question 2:
 1
 2
 3
 
 question 3:
 1
 2
 3
 
 question 4:
 1
 2
 3

user_11229414 · Answer

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
  section1Res.innerHTML = generateResultTable(section1Question, section1Total)

  //Section 2
  section2Res.innerHTML = generateResultTable(section2Question, section2Total)
}

function generateResultTable(checkedQuestion, total) {
  var result = "Results:
"
  var tr = "" + total + "" + ((total / (checkedQuestion * 3)) * 100).toFixed(2) + ""
  result += "" + tr + "Total Percentage
"

  return result
}

table,
table tr th,
table tr td {
  border: 1px solid #0094ff;
}


  Select a radio button and click on Submit.



  Section 1
  question 1:
  1
  2
  3

  
 question 2:
  1
  2
  3

  
 question 3:
  1
  2
  3








  Section 2
  question 1:
  1
  2
  3

  
 question 2:
  1
  2
  3
  
 question 3:
  1
  2
  3
  
 question 4:
  1
  2
  3

I encapsulated a method to generate a table, you only need to pass in two parameters: the number of selected questions and the total number of questions

user_13669048 · Answer

You can simply make a dynamic table in your JS function which returns an each table of results from each section.

I believe you want one final answer of each section with results showing at the bottom of it.

I have also added some validation to make sure that user must select atleast one question for each section so that the tables are not empty all the time. It will show user an error message if question is selected from each section.

Instead of using two results div i am only using one final-results where each section results table will be displayed for you in a table format.

Live Demo:

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 finalResults = document.querySelector('.final-results')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //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
    }
  })

  //Final Results and validation
  if (section1Total > 0 && section2Total > 0) {
    finalResults.innerHTML += genTable(section1Question, section1Total, 1)
    finalResults.innerHTML += genTable(section2Question, section2Total, 2)
  } else {
    finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section'
  }

}

function genTable(ques, total, section) {
  var result = "Section " + section + ":
"
  var tr = "" + total + "" + ((total / (ques * 3)) * 100).toFixed(2) + ""
  result += "" + tr + "Total Score Percentage
"

  return result
}

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


  Select a radio button and click on Submit.



  Section 1
  question 1:
  1
  2
  3

  
 question 2:
  1
  2
  3

  
 question 3:
  1
  2
  3




  Section 2
  question 1:
  1
  2
  3

  
 question 2:
  1
  2
  3
  
 question 3:
  1
  2
  3
  
 question 4:
  1
  2
  3

how to put the result of JS/HTML page in table format?

2 Answers