Hi Guys!
Below I’ll leave the link to my first ever project. It’s a simple Stopwatch build in html, CSS and JS.
I’d appreciate some help with the ‘Lapses list’, and how to reset it when hitting the reset button.
Feel free to comment on the project, use it or suggest adjustments.
Here ’s the project.
mtf
November 11, 2020, 9:51pm
2
Do you want to remove the LI or just remove the contents?
remove the content on reset so that when the timer starts again, and the “laps” button is hit, I’d like the LI to get populated with new lapses
mtf
November 11, 2020, 10:08pm
4
So you want it to reset to zero?
mtf
November 11, 2020, 10:23pm
6
If you are able to update the lap count then use the same variable to update it to zero?
mtf
November 11, 2020, 10:32pm
8
How are you updating the lap count?
using this function
function lapsButton() {
const lapListTag = document.createElement("LI");
lapListTag.innerHTML = timer.textContent
document.getElementById("lapses").appendChild(lapListTag)
}
mtf
November 11, 2020, 10:51pm
10
Is it necessary to create a new LI every time that button is clicked?
as far as my beginner knowledge goes: yes, cause that’s how the lapses are shown on the screen when the “laps” button is clicked. Let me know if you have another suggestion on how to do so without creating new LI
mtf
November 12, 2020, 4:35pm
12
Is there a list of previous lap times that grows on each click of the laps button? Or is it one field to reset to zero?
the list of LI elements starts to generate at every press of the “laps” button, and for now, it stays populated till the page is refreshed.
btw I put a link to the program in Codepen.io my post if you’d check it
mtf
November 12, 2020, 7:16pm
14
Just going out on our walk. Will look at your pen when I get back. It’ll be about an hour.
mtf
November 12, 2020, 8:11pm
16
In the Reset callback, empty the OL by removing all its children.
const ol = document.getElementById('lapsesLi')
let child = ol.lastElementChild;
while (child) {
ol.removeChild(child);
child = ol.lastElementChild;
}
Cite
Remove all the child elements of a DOM node in JavaScript - GeeksforGeeks
did it work for you?
cause here’s my screenshot after adding the code snippet you suggested and hitting the “reset” button after few “laps” button hits:
mtf
November 12, 2020, 9:19pm
18
I didn’t test it. Where did you insert the code?
in the reset function as you advised
mtf
November 12, 2020, 9:26pm
20
Be sure the LI’s are going in the correct container.
document.getElementById("lapsesLi").appendChild(lapListTag)
^^^^^^
It works now.