How to display calculations in an html form using javascript

Question

I have a short form in HTML and basically it calculates the results of the users input. I have 4 sections, section a.1, a.2, b.1, b.2. I want to be able to add sum of section a.1 and display it on the subtotal line, same goes for section a.2, b.1 and b.2. Lastly I would like to sum up the total points awarded and display it in the totals row on the summary table at the top of the page. Please run my code and any advice or code snippets is appreciated. I would like to maintain the structure of my code. I am new to javascript and would love some advice to help build my understanding. Thanks!

var sections = {
  section_a: 0,
  section_b: 0,

}

//Calculates Section A
function calcSectionA(section) {
  let sum = 0;
  //Queries All  and looks for class = "select section_b" and add each selected option and assings it to sum
  document.querySelectorAll('select.' + section)
    .forEach((input) => {
      sum += parseInt(input.options[input.selectedIndex].value);
    });
  sections[section] = sum;
  document.getElementById('total_' + section).textContent = sum;
  document.getElementById('summary_' + section).textContent = sum
  document.getElementById('percent_' + section).textContent = Math.ceil(sum / 4 * 100) + '%';
  calcRanks();

}

function calcRanks() {
  let sectionsArr = [];
  let keys = Object.keys(sections);
  keys.forEach((key, i) => {
    sectionsArr.push({
      section: key,
      value: sections[key],
      rank: 0
    });
    if (i + 1 === keys.length) {
      sectionsArr.sort((a, b) => {
        return a.value > b.value ? -1 : a.value < b.value ? 1 : 0
      });
      let lastIndex = 0;
      for (let i = 1; i < sectionsArr.length; i++) {
        let section = sectionsArr[i];
        let lastSection = sectionsArr[lastIndex];
        //console.log(lastSection.value, section.value);
        if (lastSection.value > section.value) {
          sectionsArr[i].rank = lastSection.rank + 1;
        }
        if (lastSection.value === section.value) {
          sectionsArr[i].rank = lastSection.rank;
        }
        lastIndex = i;
      }
      displayRanks(sectionsArr);
    }
  });
}

function displayRanks(sections) {
  sections.forEach((section) => {
    document.getElementById('rank_' + section.section).textContent = section.rank + 1;
  });
}


  
    Category
    Points Possible
    Points Awarded
    Percent Achieved
    Ranking
  
  
    A
    60
    
    
    
  
  
    B
    50
    
               
               
             
             
                   Totals=
    
    
    
    

  




  Section A.1
  

    Question 1
    
    
      
    
  
  
    Question 2
    
    
      
    
  
  
    Sub Total
    
    
  
  Section A.2
  

    Question 1
    
    
      
    
  
  
    Question 2
    
    
      
    
  
  
    Sub Total
    
    
  
  
    Section A. Total
    
    
  

  Section B.1
  

    Question 1
    
    
      
    
  
  
    Question 2
    
    
      
    
  
  
    Sub Total
    
    
  
  Section B.2
  

    Question 1
    
    
      
    
  
  
    Question 2
    
    
      
    
  
  
    Sub Total
    
    
  
  
    Section B. Total

King11 · Accepted Answer

I gave a number of your div and some span tag id attributes. In your onchange functions, I just grabbed the values of the ddls and sum them up for the individual totals for A and B sections. Then at the top of the table, I just grabbed the two numbers and summed those as well in your onchange function so every time you change a value, the sum will update. This isn't the best way to give your elements values, but this should help get you on the right track. Hopefully this helps

var sections = {
  section_a: 0,
  section_b: 0,

}

//Calculates Section A
function calcSectionA(section) {
  let sum = 0;
  //Queries All  and looks for class = "select section_b" and add each selected option and assings it to sum
  document.querySelectorAll('select.' + section)
    .forEach((input) => {
      sum += parseInt(input.options[input.selectedIndex].value);
    });
  sections[section] = sum;
  document.getElementById('total_' + section).textContent = sum;
  document.getElementById('summary_' + section).textContent = sum
  document.getElementById('percent_' + section).textContent = Math.ceil(sum / 4 * 100) + '%';
  calcRanks();
  var b1Q1 = document.getElementById('b1').value;
  var b1Q2 = document.getElementById('b2').value;
  document.getElementById('section_b1subTotal').textContent = parseInt(b1Q1) + parseInt(b1Q2);
  var b2Q1 = document.getElementById('b3').value;
  var b2Q2 = document.getElementById('b4').value;
  document.getElementById('section_b2subTotal').textContent = parseInt(b2Q1) + parseInt(b2Q2);
  var aTotals = document.getElementById('summary_section_a').textContent;
  var bTotals = document.getElementById('summary_section_b').textContent;
  if (aTotals !== "" && bTotals !== "") {
    document.getElementById('totalNum').textContent = parseInt(aTotals) + parseInt(bTotals);
  }
}



function calcRanks() {
  let sectionsArr = [];
  let keys = Object.keys(sections);
  keys.forEach((key, i) => {
    sectionsArr.push({
      section: key,
      value: sections[key],
      rank: 0
    });
    if (i + 1 === keys.length) {
      sectionsArr.sort((a, b) => {
        return a.value > b.value ? -1 : a.value < b.value ? 1 : 0
      });
      let lastIndex = 0;
      for (let i = 1; i < sectionsArr.length; i++) {
        let section = sectionsArr[i];
        let lastSection = sectionsArr[lastIndex];
        //console.log(lastSection.value, section.value);
        if (lastSection.value > section.value) {
          sectionsArr[i].rank = lastSection.rank + 1;
        }
        if (lastSection.value === section.value) {
          sectionsArr[i].rank = lastSection.rank;
        }
        lastIndex = i;
      }
      displayRanks(sectionsArr);
    }
  });
}

function displayRanks(sections) {
  sections.forEach((section) => {
    document.getElementById('rank_' + section.section).textContent = section.rank + 1;
  });
}


  
    Category
    Points Possible
    Points Awarded
    Percent Achieved
    Ranking
  
  
    A
    60
    
    
    
  
  
    B
    50
    
               
               
             
             
                   Totals=
    
    
    
    

  




  Section A.1
  

    Question 1
    
    
      
    
  
  
    Question 2
    
    
      
    
  
  
    Sub Total
    
    
  
  Section A.2
  

    Question 1
    
    
      
    
  
  
    Question 2
    
    
      
    
  
  
    Sub Total
    
    
  
  
    Section A. Total
    
    
  

  Section B.1
  

    Question 1
    
    
      
    
  
  
    Question 2
    
    
      
    
  
  
    Sub Total
    
    
  
  Section B.2
  

    Question 1
    
    
      
    
  
  
    Question 2
    
    
      
    
  
  
    Sub Total
    
    
  
  
    Section B. Total

jsfiddle: https://jsfiddle.net/q28yk4j0/1/

How to display calculations in an html form using javascript

Answers (1)

Related Questions