Question 248271 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Need to add a reset button to reset number of passengers saved to 0 but also keeping the text

I am creating a passenger counting app which counts the number of passengers allowing it to increment and then to save this on to the screen.

I wanted to add a reset button.so that the saved progress can reset back to 0, while keeping the text.

so when the rest button is hit, it should show the text as previous entries: (blank)

let countEl = document.getElementById("count-el")
let count = 0;
let saveEl = document.getElementById("save")
let welcomeEl = document.getElementById("welcome-el")
let myName = "Gull"
let greeting = "Welcome back "
welcomeEl.innerText = greeting + " " + myName
welcomeEl.innerText += "👋"

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

function save() {
  let counterSave = count + "-"
  saveEl.textContent += counterSave
  countEl.textContent = 0
  count = 0
}

function reset() {
  saveEl = 0
}
<h1>People entered</h1>
<h2 id="count-el">0</h2>

<button id="increment-btn" onclick="increment()">Increment</button>
<button id="save-btn" onclick="save()">**Save**</button>
<button id="reset-btn" onclick="reset()">**Reset**</button>
<p id="save">Previous entries: </p>

<p id="welcome-el"></p>
<script src="index.js"></script>

Expectations:

where to have the reset function of passengers saved reset to 0.

so the text would appear as Previous entries: 0 or just previous entries: (blank no number shown.)

I have added it so that the reset function via onclick on the html button created. so that when it triggers it should just reset the number to 0.

Actual result:

Nothing happens when clicking on the button.

I have tried the following but this removes the text and the resets the number to 0.But does not show again even after clicking on increment and save after reset.

function reset() {
      saveEl.innertext = 0
}
Tags:

3

Answers


  1. 0

    My solution would be a span inside the #save paragraph. What you are doing at the moment is setting the contents of #save to "0". It’s doing exactly what you tell it to do by replacing "Previous entries: " with "0".

    In the HTML … <p id = "save">Previous entries: <span id="saveCount"></span></p>

    In the js …

    function reset() {
  document.getElementById("saveCount").innerText = 0;
}
    Login or Signup to reply.
  2. 0

    Solution is very simple, change <p id="save">Previous entries:</p> to <p>Previous entries: <span id="save"></span></p> and in the reset function clear all the record which is stored before.

    let countEl = document.getElementById("count-el")
let count = 0;
let saveEl = document.getElementById("save")
let welcomeEl = document.getElementById("welcome-el")
let myName = "Gull"
let greeting = "Welcome back "
welcomeEl.innerText = greeting + " " + myName
welcomeEl.innerText += "👋"

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

function save() {
  let counterSave = count + "-"
  saveEl.textContent += counterSave
  countEl.textContent = 0
  count = 0
}

function reset() {
  saveEl.textContent = ""
  countEl.textContent = 0
  count = 0
}
    <h1>People entered</h1>
<h2 id="count-el">0</h2>

<button id="increment-btn" onclick="increment()">Increment</button>
<button id="save-btn" onclick="save()">**Save**</button>
<button id="reset-btn" onclick="reset()">**Reset**</button>
<p>Previous entries: <span id="save"></span></p>

<p id="welcome-el"></p>
<script src="index.js"></script>
    Login or Signup to reply.
  3. 0
    • Please use this solution, It’s work for you.
    let countEl = document.getElementById("count-el")
let count = 0;
let saveEl = document.getElementById("save")
let welcomeEl = document.getElementById("welcome-el")
let myName = "Gull"
let greeting = "Welcome back "
welcomeEl.innerText = greeting + " " + myName
welcomeEl.innerText += "👋"

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

function save() {
  let counterSave = count + "-"
  saveEl.textContent += counterSave
  countEl.textContent = 0
  count = 0
}

function reset() {
  saveEl.textContent = 0
  countEl.textContent = 0
}
    <!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <h1>People entered</h1>
<h2 id="count-el">0</h2>

<button id="increment-btn" onclick="increment()">Increment</button>
<button id="save-btn" onclick="save()">**Save**</button>
<button id="reset-btn" onclick="reset()">**Reset**</button>
<p id="save">Previous entries: </p>

<p id="welcome-el"></p>
<script src="index.js"></script>
      <p id="currentTime"></p>
      <script src="script.js"></script>
  </body>
</html>

    *

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search