Stopwatch project: How to empty <li> elements on a click?

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.

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

So you want it to reset to zero?

that’s right I guess

If you are able to update the lap count then use the same variable to update it to zero?

Not sure I understand

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)

}

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

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

Just going out on our walk. Will look at your pen when I get back. It’ll be about an hour.

sure, enjoy your walk!

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

https://www.geeksforgeeks.org/remove-all-the-child-elements-of-a-dom-node-in-javascript/

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:

I didn’t test it. Where did you insert the code?

in the reset function as you advised

Be sure the LI’s are going in the correct container.

document.getElementById("lapsesLi").appendChild(lapListTag)
                          ^^^^^^

It works now.