Performing calculation in JavaScript but parts of the calculation are not working. I tried all the possible ways by looking at examples form online to calculate or add all the Response Percent from the months Jan to Dec to get its average and display the average in the total average under total response but my code below is not working properly
Also I want to save the selected options from the user when open the web page again the selected options still there.
const $select_rows = $('.select_row');
const $percent_row = $('.percent_row');
function update_column(col_index) {
const child_index = col_index + 2; // 1 indexed plus 1 for row heading
const $selects = $select_rows.find('td:nth-child(' + child_index + ') select');
if ($selects.length) {
let yes_count = 0;
$selects.each(function() {
if ($(this).val() == 'Yes') {
yes_count++;
}
});
$percent_row.find('td:nth-child(' + child_index + ') .cnt-percent-y').text((yes_count * 100 / $selects.length).toFixed(2));
}
}
function setup() {
$select_rows.each(function() {
$(this).find('select').each(function(index) {
const col_index = index;
$(this).change(function() {
update_column(col_index);
});
update_column(col_index);
});
});
}
setup();
function average(perResponse) {
var total = 0;
var perRseponse;
for (var i = 0; i < perResponse.length; i++) {
total += perResponse[i];
}
var avg = total / source.length;
alert(avg)
document.getElementById("result").innerHTML = avg;
}table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}<title>Finding Average</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p style="font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">
Finding Average & Calculation of Total Percentage
</p>
<table>
<thead>
<tr>
<th>Month</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sept</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
<th>Total Average</th>
</tr>
</thead>
<tbody>
<tr class="select_row">
<td>Bought Office Supplies</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="select_row">
<td>Saving's Over $25,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="select_row">
<td>Savings</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="select_row">
<td>Over Budget</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="select_row">
<td>Over Budget $10,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="select_row">
<td>Over Budget $20,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr class="percent_row">
<td>Response Percent</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td> //Here goes the average total from calculation from the average from Jan to Dec
<td></td>
</tr>
</tfoot>
</table>Advertisement
Answer
Along the lines of, there’s no need for jQuery since the advent of .querySelector and .querySelectorAll, I’ve created the following example for you to study. The nested looping design is complex, if you haven’t done anything like this before. In time you’ll understand.
//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = /Mobi/i.test(nav.userAgent);
S = (selector, within)=>{
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className)=>{
return node.classList.contains(className);
}
aC = (node, ...classNames)=>{
node.classList.add(...classNames);
return aC;
}
rC = (node, ...classNames)=>{
node.classList.remove(...classNames);
return rC;
}
tC = (node, className)=>{
node.classList.toggle(className);
return tC;
}
// small Library above - magic below can be put on another page using a load Event *(except // end load line)*
const trs = Q('tbody>tr'), trsL = trs.length, prs = Q('tfoot>tr>td+td'), prsM = prs.length-1, ya = [];
function showAverages(){
for(let i=0,endTd; i<trsL; i++){
endTd = S('td:last-child', trs[i]);
endTd.textContent = (ya[i].reduce((r, v)=>r+v)/12*100).toFixed(2);
}
let total = 0;
for(let p=0,c,t,l=ya.length; p<prsM; p++){
c = 0;
for(let i=0; i<l; i++){
c += ya[i][p];
}
t = (c/l*100).toFixed(2); prs[p].textContent = t; total += (+t);
}
prs[prsM].textContent = (total/prsM).toFixed(2);
}
for(let i=0,r,sels,y; i<trsL; i++){
r = trs[i]; sels = Q('select', r); ya.push([]);
for(let n=0,s,q=sels.length; n<q; n++){
s = sels[n]; s.value = 'Yes';
y = s.value === 'Yes' ? 1 : 0;
ya[i].push(y);
s.oninput = ()=>{
ya[i][n] = s.value === 'Yes' ? 1 : 0;
showAverages();
}
}
}
showAverages();
}); // end load
//]]>/* css/external.css */
*{ /* set font-size separate to avoid white space issues */
box-sizing:border-box; font-size:0; padding:0; margin:0;
}
p{
font:italic 16px Georgia, Garamond, serif;
}
table{
width:100%; table-layout:fixed; border-collapse:collapse;
}
thead *,tfoot *{
font:bold 16px Arial, san-serif;
}
tbody *{
font:15px Arial, sans-serif;
}
td,th{
width:90px; border:1px solid #ccc; text-align:left; padding:8px;
}
tr:nth-child(even){
background:#ddd;
}
tbody>tr>td:last-child:after,tfoot>tr>td:not(:first-child):after{
content:'%'; font-weight:bold;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Finding Average</title>
</head>
<body>
<p>
Finding Average & Calculation of Total Percentage
</p>
<table>
<thead>
<tr>
<th>Month</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sept</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
<th>Total Average</th>
</tr>
</thead>
<tfoot>
<tr class="percent_row">
<td>Response Percent</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tfoot>
<tbody>
<tr class="select_row">
<td>Bought Office Supplies</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Saving's Over $25,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Savings</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Over Budget</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Over Budget $10,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Over Budget $20,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<html>
</body>