How can i add and display the total number of people counted in this app-CodePudding

I am trying to add and displlay the total number of people that entered the subway in this counting app. I intend to display the total in the Total paragraph. have tried to add the variable 'count' and 'previous' but it outputs the counted number individually insteadof adding them.

let countEl = document.getElementById('count-el');
let count = 0;

function increment() {
  count  = 1;
  countEl.textContent = count;
}

function save() {
  let Save = document.getElementById('save-el');
  let previous = count   ' - ';
  Save.textContent  = ' '   previous;

  countEl.textContent = 0;
  count = 0;
}

html,
body {
  height: 100%;
  width: 100%;
  background-color: rbg(113, 255, 005);
}

body {
  background-color: #398000;
  text-align: center;
}

h1,
h2 {
  text-align: center;
}

button {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #e70d0d;
  font-weight: bold;
  width: 200px;
  margin-bottom: 5px;
  border-radius: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Javascript tut</title>
  <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>People entered</h1>
  <h2 id="count-el">0</h2>
  <button id="increment-Btn" onclick="increment()">INCREMENT</button><br />
  <button id="save-btn" onclick="save()">SAVE</button>
  <p id="save-el">Previous entries:</p>
  <p id="total">Total</p>

  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
  <script src="index.js"></script>
</body>

</html>

CodePudding user response：

Maybe something like this

const countEl= document.getElementById("count-el");
const totalEl= document.getElementById("total");
const saveEl = document.getElementById("save-el"); 
let count = 0;
let previous = 0;
let total = 0;

function increment() {
  count  = 1;
  countEl.textContent= count;
}

function save() {
  saveEl.textContent  = count   ' - ';
  total  = count;
  totalEl.textContent = total;
  countEl.textContent= 0;
  count = 0;
}

<h2 id = "count-el">0</h2>
  <button id="increment-Btn" onclick="increment()">INCREMENT</button><br>
  <button id="save-btn" onclick="save()">SAVE</button>
  <p id="save-el">Previous entries: </p>
  <p>Total: <span id="total"></span></p>

CodePudding user response：

Make a new variable total which after each SAVE is increased by count

Something like this :

function save() {
   ....
   ....
   total  = count;
  }

Then display it right next to the "Total:" on your HTML using its id.