Formatowanie cyfry na liczbę dwucyfrową

Question

Robię taki timer w javascript

const timer = document.querySelector('.timer');
const hours = document.querySelector('#timer-hours');
const minutes = document.querySelector('#timer-minutes');
const seconds = document.querySelector('#timer-seconds');
const alarm = new Audio ('timer.mp3');

function formatNumbers(e)
{
    e.preventDefault();
    const span = e.target;
    if (e.code == 'Delete')
    {
        span.textContent == '00';
        return;
    }

    if (/^\d$/.test(e.key))
    {
        const currentValue = span.textContent, inputValue = e.key;

        let newValue = parseInt(currentValue + inputValue);
        if (newValue > 99) newValue = newValue.toString().slice(-2);
        if (newValue > 59) newValue = inputValue;
        span.textContent = ('00' + newValue).slice(-2);
    }
}

function countDown()
{
    if (hours.textContent == 0 && minutes.textContent == 0 && seconds.textContent == 0)
    {
        alarm.play();
    }
    else
    {
        hours.setAttribute('contenteditable', 'false');
        minutes.setAttribute('contenteditable', 'false');
        seconds.setAttribute('contenteditable', 'false');
        seconds.textContent.toString().padStart(2, '0');
        if (seconds.textContent>0)
        {
            seconds.textContent--;
        }
        else
        {
            seconds.textContent = 59;
            if (minutes.textContent>0)
            {
                minutes.textContent--;
            }
            else
            {
                minutes.textContent = 59;
                if (hours.textContent>0)
                {
                    hours.textContent--;
                }
            }
        }
    }
    setTimeout('countDown()', 1000);
}
timer.addEventListener('keydown', formatNumbers);
window.addEventListener('keydown', (event) => {
    event.preventDefault();
    if (event.key === 'Enter')
    {
        countDown();
    }
})

funkcja formatNumber() działa prawidłowo.

Problem pojawia się dopiero z funcją

function countDown()
{
    if (hours.textContent == 0 && minutes.textContent == 0 && seconds.textContent == 0)
    {
        alarm.play();
    }
    else
    {
        hours.setAttribute('contenteditable', 'false');
        minutes.setAttribute('contenteditable', 'false');
        seconds.setAttribute('contenteditable', 'false');
        seconds.textContent.toString().padStart(2, '0');
        if (seconds.textContent>0)
        {
            seconds.textContent--;
        }
        else
        {
            seconds.textContent = 59;
            if (minutes.textContent>0)
            {
                minutes.textContent--;
            }
            else
            {
                minutes.textContent = 59;
                if (hours.textContent>0)
                {
                    hours.textContent--;
                }
            }
        }
    }
    setTimeout('countDown()', 1000);
}

a konkretnie z 

seconds.textContent.toString().padStart(2, '0');

Nie rozumiem czemu ta linijka nie działa. Robiłem też doklejanie zera z przodu do wartości seconds.textContent

if (seconds.textContent < 10)
{
     seconds.textContent = '0' + seconds.textContent;
}

I to też nie działa

Comments

Działający kod

const timer = document.querySelector('.timer');
const hours = document.querySelector('#timer-hours');
const minutes = document.querySelector('#timer-minutes');
const seconds = document.querySelector('#timer-seconds');
const alarm = new Audio ('timer.mp3');

function formatNumbers(e)
{
    e.preventDefault();
    const span = e.target;
    if (e.code == 'Delete')
    {
        span.textContent == '00';
        return;
    }

    if (/^\d$/.test(e.key))
    {
        const currentValue = span.textContent, inputValue = e.key;

        let newValue = parseInt(currentValue + inputValue);
        if (newValue > 99) newValue = newValue.toString().slice(-2);
        if (newValue > 59) newValue = inputValue;
        span.textContent = ('00' + newValue).slice(-2);
    }
}

function countDown()
{
    if (hours.textContent == 0 && minutes.textContent == 0 && seconds.textContent == 0)
    {
        alarm.play();
    }
    else
    {
        setTimeout('countDown()', 1000);
        hours.setAttribute('contenteditable', 'false');
        minutes.setAttribute('contenteditable', 'false');
        seconds.setAttribute('contenteditable', 'false');
        if (seconds.textContent>0)
        {
            seconds.textContent--;
        }
        else
        {
            seconds.textContent = 59;
            if (minutes.textContent>0)
            {
                minutes.textContent--;
            }
            else
            {
                minutes.textContent = 59;
                if (hours.textContent>0)
                {
                    hours.textContent--;
                }
            }
        }
    }
    if (seconds.textContent < 10 && seconds.textContent > 0)
    {
        seconds.textContent = '0' + seconds.textContent;
    }
    else if (seconds.textContent == 0)
    {
        seconds.textContent = '00';
    }
    // if (seconds.textContent < 10 && seconds.textContent > 0)
    // {
    //     seconds.textContent = '0' + seconds.textContent;
    // }
    // else if (seconds.textContent == 0)
    // {
    //     seconds.textContent = '00';
    // }
    // if (seconds.textContent < 10 && seconds.textContent > 0)
    // {
    //     seconds.textContent = '0' + seconds.textContent;
    // }
    // else if (seconds.textContent == 0)
    // {
    //     seconds.textContent = '00';
    // }
}
timer.addEventListener('keydown', formatNumbers);
window.addEventListener('keydown', (event) => {
    event.preventDefault();
    if (event.key === 'Enter')
    {
        countDown();
    }
})