공 하나가 화면에 표시되는 것을 확인했으니 공 7개를 모두 화면에 표시해 보겠습니다. setTimeout()을 7번 사용해도 되지만, 코드가 중복되므로 반복문과 함께 사용하는 편이 좋습니다. 보너스 공은 화면에 표시하는 위치가 다르니 어떻게 해야 할지 고민해 보세요.
당첨 숫자의 공 6개는 다음과 같이 표시합니다.
① for 문으로 0부터 winBalls.length - 1(5)까지 반복합니다.
② 1000 * (i + 1)밀리초마다 공을 하나씩 생성해 winBalls[i]의 숫자를 넣습니다. 1초에는 winBalls[0], 2초에는 winBalls[1], 3초에는 winBalls[2] 공이 생성됩니다.
$form.addEventListener('submit', (event) => {
(중략)
console.log(winBalls, bonus);
for (let i = 0; i < winBalls.length; i++) { ------ ①
setTimeout(() => {
const $ball = document.createElement('div');
$ball.className = 'ball';
$ball.textContent = winBalls[i]; ------------ ②
$result.appendChild($ball);
}, 1000 * (i + 1)); --------------------------- ②
}
});