728x90
로또 번호 랜덤뽑기
코드블럭
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마무리문제2-로또 번호 생성하기</title>
<style>
#cont {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffecd6;
}
h1 {
color: #ff8239;
font-size: 30px;
padding-top: 50px;
}
button {
width: 400px;
padding: 20px;
font-size: 20px;
border: none;
border-radius: 10px;
background-color: #ffc0ab;
}
#result {
padding: 20px;
font-size: 30px;
color: #000000;
}
</style>
</head>
<body>
<div id="cont">
<h1>로또 번호뽑기</h1>
<button>뽑기</button>
<div id="result"></div>
</div>
</body>
<script>
let button = document.querySelector("button");
let result = document.querySelector("#result");
function lottoNumber(){
let randomLotto = new Set();
for(let i=1; i<=6; i++){
randomLotto.add(Math.floor(Math.random() * 45) + 1);
}
result.innerText = [...randomLotto];
}
button.addEventListener("click", lottoNumber);
</script>
</html>보충설명
✨HTML에서 button 요소와 result 요소를 querySelector 메소드로 가져와서 변수 button과 result에 할당합니다.
lottoNumber 함수는 새로운 Set 객체를 생성하고, 1부터 45까지의 숫자 중 랜덤으로 6개를 선택해서 Set에 추가합니다. 이 때, 중복된 숫자가 나오지 않도록 Set 객체를 사용합니다.
button 요소에 click 이벤트 리스너를 추가하고, 이벤트 발생 시 lottoNumber 함수를 호출합니다. 그리고 result 요소의 innerText를 ...randomLotto로 설정합니다. ...randomLotto는 Set 객체를 배열로 변환한 것으로, 쉼표로 구분된 6개의 로또 번호가 result 요소에 출력됩니다.
버튼을 클릭하면 랜덤한 6개의 로또 번호가 중복 없이 생성되어 화면에 출력됩니다.