1아웃,2아웃,3아웃 질문입니다. 그리고 색 입히기

if (strike === 0 && ball === 0) {

      out++;

      $logs.append(`${value}:${out+0}아웃`,  document.createElement('br'))

    }

이렇게 코드를 작성해보았는데, 1아웃, 2아웃, 3아웃으로 정상 작동합니다.

여기서 {out+1}로 하면 2아웃 부터 작동하는데요, 이 원인은

  const numbers = []; // [1, 2, 3, 4, 5, 6, 7, 8, 9]

  for (let n = 0; n < 9; n += 1) {

    numbers.push(n + 1);

  }

의 numbers.push(n + 1); 때문인건가요? 

-------------------------------------------------------

글자 색 입히기

    if (strike === 0 && ball === 0) {

      out++;

      let outTxt = document.createElement('span');

      outTxt.style = 'color: red';

      outTxt.innerHTML = `${out+0}`+"아웃";

      $logs.append(`${value}:`, outTxt, document.createElement('br'))

    } else {

      let strikeTxt = document.createElement('span');

      strikeTxt.style = 'color: blue';

      strikeTxt.innerHTML = `${strike}`+"스트라이크";

      let ballTxt = document.createElement('span');

      ballTxt.style = 'color: green';

      ballTxt.innerHTML = `${ball}`+"볼";

      $logs.append(`${value}:`, strikeTxt, ballTxt, document.createElement('br'));

    }

    if (out === 3) {

      defeated ();

      return;

    }

아웃은 빨간색, 스트라이크는 파란색, 볼은 녹색으로 지정해 봤는데요, 맞는 방법일까요? 구동할 때는 오류 없이 잘 진행됐습니다.