Brak odpowiedzi ze strony funkcji formatNumbers()

pytanie zadane 9 lutego w JavaScript przez Piotrek2713 Mądrala (5,400 p.)

Robię sobie o taki stoper w javascript

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stoper</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="stopwatch">
        <span contenteditable="true" id="stopwatch-hours" class="stopwatch-number"></span>
        <span class="stopwatch-colon">:</span>
        <span contenteditable="true" id="stopwatch-minutes" class="stopwatch-number"></span>
        <span class="stopwatch-colon">:</span>
        <span contenteditable="true" id="stopwatch-seconds" class="stopwatch-number"></span>
    </div>
    <script src="stopwatch.js"></script>
</body>
</html>

A tak prezentuje się cały kod js

const hours = document.getElementById('stopwatch-hours');
const minutes = document.getElementById('stopwatch-minutes');
const seconds = document.getElementById('stopwatch-seconds');
const number = document.getElementsByClassName('stopwatch-number');

function displayNumbers()
{
    const defaultNumber = 0;
    hours.innerHTML = defaultNumber;
    minutes.innerHTML = defaultNumber;
    seconds.innerHTML = defaultNumber;
    for (let i = 0; i < number.length; i++)
    {
        parseInt(number[i].innerHTML);
    }
}

function formatNumbers()
{
    for (let i = 0; i < number.length; i++)
    {
        if (number[i].innerHTML<10)
        {
            number[i].innerHTML = "0" + number[i].innerHTML;
        }
    }
}
formatNumbers();
displayNumbers();
for (let i = 0; i < number.length; i++)
{
    number[i].addEventListener('change', formatNumbers, false);
}

tak wygląda strona po odświeżeniu

funkcja displayNumbers działa prawidłowo, ale niestety liczby się nie formatują na "00". Dodałem parseint aby mieć pewność, że number.innerHTML to liczba decymalna, a nie ciąg znaków aby sprawdzić warunek, lecz nadal coś nie działa. Konsola jest pusta

komentarz 9 lutego przez Iei Obywatel (1,950 p.)

Jak dla mnie to zbyt skomplikowany kod js piszesz, zobacz czy nie można tego jakoś uprościć

2 odpowiedzi

odpowiedź 9 lutego przez VBService Ekspert (253,420 p.)
wybrane 10 lutego przez Piotrek2713

Najlepsza

Ten kod zwraca integer gdzie?

    for (let i = 0; i < number.length; i++)
    {
        parseInt(number[i].textContent);
    }

Proponuje:

użyć textContent, innerHTML można użyć, ale w tym kontekście interesuje nas tylko sam tekst (zapisana liczba)
użyć zdarzenia keydown
użyć Event Delegation [ 1 ] [ 2 ]

Przykład z wykorzystaniem Event Delegation

[ działający kod on-line ]

<style>
  /* dla demonstracji */
  .stopwatch {
    font: 300 2rem/1 system-ui, monospace;
    padding: 2rem;
  }
  [contenteditable] {
    outline-offset: .15rem;
    outline-color: rgba(0, 255, 0, .4);
    padding: .15rem;
    letter-spacing: .05rem;    
  }
  [contenteditable]:focus {
    animation: pulsate 2s infinite;
  }
  @keyframes pulsate {
    0% {
      box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
    }
    50% {
      box-shadow: 0 0 40px rgba(0, 255, 0, 0.4);
    }
    100% {
      box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
    }
  }
</style>

<div class="stopwatch">
  <span contenteditable="true" id="stopwatch-hours" class="stopwatch-number">00</span>
  <span class="stopwatch-colon">:</span>
  <span contenteditable="true" id="stopwatch-minutes" class="stopwatch-number">00</span>
  <span class="stopwatch-colon">:</span>
  <span contenteditable="true" id="stopwatch-seconds" class="stopwatch-number">00</span>
</div>

<script>
  const stopwatch = document.querySelector('.stopwatch'); // dla Event Delegation

  function formatNumbers(e) {
    e.preventDefault();
    const span = e.target;

    if (e.code == 'Delete')  { 
      span.textContent = '00';
      return;
    }

    if (/^\d$/.test(e.key)) { // tylko cyfry
      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);
    }
  }

  stopwatch.addEventListener('keydown', formatNumbers);
</script>

[ Simplest inline method to left pad a string ]