Automatic equation of two divs displayed in a third div

Question

With the help of another S.O user I was able to set up a sort of 'leaderboard' using JavaScript.

For Reference: https://jsfiddle.net/j1xcL0mj/

Being new to JS, I'm having trouble in working out, how to code it so that the 'Average' column, will automatically display the value inside the 'Average' column - from the equation ('Score' divided by 'Count').

I know how I'd go about doing it if there were text fields people could input numbers into, followed by a calculate button e.g.

num1 = document.getElementById("score").value;

num2 = document.getElementById("count").value;

document.getElementById("average").innerHTML = num1 / num2;

But I'm not sure how to code it so the page will automatically calculate and display it when it loads.

I also feel like another problem to this would be that the div class names for each players' score/count/average are named the same - am I correct in assuming they may require ID's?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Add the following code to your script:

var avgEl = document.querySelectorAll('.average');
   avgEl.forEach(function(el, i){
   var score = el.parentElement.querySelector('.score').innerHTML;
   var count = el.parentElement.querySelector('.count').innerHTML;
   var average = parseFloat(score) * count;
   el.innerHTML = average.toFixed(2);
});

Working Snippet:

document.addEventListener('DOMContentLoaded', () => {
  let elements = []
  let container = document.querySelector('#innercontain')
  // Add each row to the array
  container.querySelectorAll('.row').forEach(el => elements.push(el))
  // Clear the container
  container.innerHTML = ''
  // Sort the array from highest to lowest
  elements.sort((a, b) => b.querySelector('.score').textContent - a.querySelector('.score').textContent)
  // Put the elements back into the container
  elements.forEach(e => container.appendChild(e))
})

var avgEl = document.querySelectorAll('.average');
avgEl.forEach(function(el, i){
	var score = el.parentElement.querySelector('.score').innerHTML;
  var count = el.parentElement.querySelector('.count').innerHTML;
  var average = parseFloat(score) * count;
  el.innerHTML = average.toFixed(2);
});

#outercontain {
	width: 600px;
	height: auto;
	background-color: #f2f2f2;
	text-align: center;
}

#innercontain {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width:90%;
}

#rank {
	position: relative;
	display: inline-block;
	width: 10%;
}

#titlerow, .row, .ranknumber {
	border-bottom: 1px solid #000;
}

.title {
	position: relative;
	display: inline-block;
	width: 22.5%;
}

.title:first-child {
	width: 10%;
}

.player, .count, .score, .average {
	position: relative;
	display: inline-block;
	width: 25%;
}

.height {height:100%;max-height:45px;line-height:45px;}


.row:nth-child(1), .ranknumber:nth-child(1) {
  background: gold;
}

.row:nth-child(2), .ranknumber:nth-child(2) {
  background: #c0c0c0;
}

.row:nth-child(3), .ranknumber:nth-child(3) {
  background: #cd7f32;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="outercontain">
	<div id="titlerow"><div class="title height">RANK</div><div class="title height">PLAYER</div><div class="title height">SCORE</div><div class="title height">COUNT</div><div class="title height">AVERAGE</div>
    </div>

<div id="rank">
<div class="ranknumber height">1.</div>
<div class="ranknumber height">2.</div>
<div class="ranknumber height">3.</div>
<div class="ranknumber height">4.</div>
<div class="ranknumber height">5.</div>

</div><div id="innercontain">
	<div class="row">
      <div class="player height">Player1</div><div class="score height">310</div><div class="count height">3</div><div class="average height"></div>
	</div>
	<div class="row">
      <div class="player height">Player2</div><div class="score height">458</div><div class="count height">3</div><div class="average height"></div>
	</div>
	<div class="row">
      <div class="player height">Player3</div><div class="score height">423</div><div class="count height">3</div><div class="average height"></div>
	</div>
	<div class="row">
      <div class="player height">Player4</div><div class="score height">985</div><div class="count height">3</div><div class="average height"></div>
	</div>
	<div class="row">
      <div class="player height">Player5</div><div class="score height">567</div><div class="count height">3</div><div class="average height"></div>
	</div>

</div>
</div>

Automatic equation of two divs displayed in a third div

Sign up