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 <Select> and looks for class = "select section_a" 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 / 8 * 100) + '%';
  calcRanks();

}

//Calculates Section B
function calcSectionB(section) {
  let sum = 0;
  //Queries All <Select> 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;
  });
}

<table>
  <tr>
    <th>Category</th>
    <th>Points Possible</th>
    <th>Points Awarded</th>
    <th>Percent Achieved</th>
    <th>Ranking</th>
  </tr>
  <tr>
    <td align="center">A</td>
    <td align="center">60</td>
    <td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
    <td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
    <td bgcolor="#92d050" align="center" id="rank_section_a"></td>
  </tr>
  <tr>
    <td align="center">B</td>
    <td align="center">50</td>
    <td align="center"><b><div><span id="summary_section_b"></span></div></td>
               <td align="center"><b><div><span id="percent_section_b"></span></div></td>
               <td bgcolor="#92d050" align="center" id="rank_section_b"></td>
             </tr>
             <tr>
                   <td align="right"><b>Totals=</b></td>
    <td align="center"><b></b></td>
    <td align="center"><b><div></div></b></td>
    <td align="center"><b><div><span id="TotalPercent"></span></div></b></td>
    <td align="center"></td>

  </tr>
</table>

<table>

  <th>Section A.1</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id=""></div></b></td>
  </tr>
  <th>Section A.2</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id=""></div></b></td>
  </tr>
  <tr>
    <td class="subtotal">Section A. Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="total_section_a"></div></b></td>
  </tr>

  <th>Section B.1</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id=""></div></b></td>
  </tr>
  <th>Section B.2</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id=""></div></b></td>
  </tr>
  <tr class="blueHead">
    <td class="subtotal">Section B. Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="total_section_b"></div></b></td>
  </tr>
</table>

On an HTML note: why the div+span inside your td? You can put text directly in a td, and if it needs specific styling, you can achieve that with a class on the td itself. (you can also use normal CSS to get columns 2 and 3 centered, using modern pseudoselectors like :first and :nth-child(...) instead of using an align attribute) — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Nov 8, 2019 at 17:31
Suggest you use jQuery and then use a selector to choose which element to put data in. Simply use .html() or .text() — Trung Nguyen
– Trung Nguyen, Commented Nov 8, 2019 at 17:37

Sarah Groß · Accepted Answer · 2019-11-08 18:04:43Z

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 <Select> and looks for class = "select section_a" 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 / 8 * 100) + '%';
  calcRanks();
  var a1Q1 = document.getElementById('a1').value;
  var a1Q2 = document.getElementById('a2').value;
  document.getElementById('section_a1subTotal').textContent = parseInt(a1Q1) + parseInt(a1Q2);
  var a2Q1 = document.getElementById('a3').value;
  var a2Q2 = document.getElementById('a4').value;
  document.getElementById('section_a2subTotal').textContent = parseInt(a2Q1) + parseInt(a2Q2);
  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);
  }
}

//Calculates Section B
function calcSectionB(section) {
  let sum = 0;
  //Queries All <Select> 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;
  });
}

<table>
  <tr>
    <th>Category</th>
    <th>Points Possible</th>
    <th>Points Awarded</th>
    <th>Percent Achieved</th>
    <th>Ranking</th>
  </tr>
  <tr>
    <td align="center">A</td>
    <td align="center">60</td>
    <td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
    <td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
    <td bgcolor="#92d050" align="center" id="rank_section_a"></td>
  </tr>
  <tr>
    <td align="center">B</td>
    <td align="center">50</td>
    <td align="center"><b><div><span id="summary_section_b"></span></div></td>
               <td align="center"><b><div><span id="percent_section_b"></span></div></td>
               <td bgcolor="#92d050" align="center" id="rank_section_b"></td>
             </tr>
             <tr>
                   <td align="right"><b>Totals=</b></td>
    <td align="center" id="totalNum"><b></b></td>
    <td align="center"><b><div></div></b></td>
    <td align="center"><b><div><span id="TotalPercent"></span></div></b></td>
    <td align="center"></td>

  </tr>
</table>

<table>

  <th>Section A.1</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select id="a1" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select id="a2" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="section_a1subTotal"></div></b></td>
  </tr>
  <th>Section A.2</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select id="a3" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select id="a4" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="section_a2subTotal"></div></b></td>
  </tr>
  <tr>
    <td class="subtotal">Section A. Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="total_section_a"></div></b></td>
  </tr>

  <th>Section B.1</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select id="b1" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select id="b2" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="section_b1subTotal"></div></b></td>
  </tr>
  <th>Section B.2</th>
  <tr>
    <td>Question 1</td>
    <td align="center"></td>
    <td align="center">
      <select id="b3" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Question 2</td>
    <td align="center"></td>
    <td align="center">
      <select id="b4" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="section_b2subTotal"></div></b></td>
  </tr>
  <tr class="blueHead">
    <td class="subtotal">Section B. Total</td>
    <td align="center"><b></b></td>
    <td align="center"><b><div id="total_section_b"></div></b></td>
  </tr>
</table>

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

Collectives™ on Stack Overflow

How to display calculations in an html form using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related