window.onload를 활용한 lotto예제

2024년 08월 21일

chantleman
작성자
2024.08.21.:36

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            border: 2px solid;
            padding: 10px;
            margin-top: 10px;
            height: 100px;
            overflow: auto;
        }
    </style>

    <script>
        window.onload = function () {
            document.querySelector('button').addEventListener('click', function () {
                //로또 (1~45의 범위에서 6개) 생성
                let lotto = [];
                let vdiv = document.querySelector('div');
                for (let i = 0; i < 6; i++) {
                    const rnd = Math.floor(Math.random() * 45) + 1;

                    //중복처리
                    if (!lotto.includes(rnd)) {
                        lotto.push(rnd);
                    }
                    else {
                        //중복일 때 6회를 보장할 수 있도록 반복횟수를 복구시키기
                        i--;
                    }
                }
                vdiv.innerHTML += lotto + "<br>";
                console.log(lotto);
            });
        };

    </script>
</head>

<body>
    <button>로또 생성</button>
    <div></div>
</body>

</html>

script 태그에 이벤트를 설정하는데,

script가 button 태그가 있는 body 태그보다 먼저 생성되기 때문에

그냥 이벤트처리하면 실행되지 않습니다.

따라서 window.onload를 사용합니다.

window.onload는 모든 코드를 다 load한 뒤에 함수를 실행한다는 뜻입니다.

728x90

'js' 카테고리의 다른 글

href, replace()를 이용한 페이지 이동 (0)	2024.08.22
BOM, DOM (0)	2024.08.21
random (0)	2024.08.20
rest parameter (0)	2024.08.12
var, let, const (0)	2024.08.08

다음 글이 없습니다.

이전 글이 없습니다.

'js' 카테고리의 다른 글

티스토리툴바