공부/javascript
2022.05.26 - javascript 랜덤 아이디 당첨 뽑기
기묜몬
2022. 5. 26. 13:09
친구가 당첨자 뽑기를 사이트 이용해서 하길래..
문득 내가 만들어볼까? 해서 시작했는데 쉽지않았음.ㅋㅋ.ㅋ.ㅋ.ㅋ...
완성본 허접함ㅠ
그리고 css적용도 안함 ㅎㅎ
==== 결과물 gif ====
[ HTML ]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script defer src="./random.js"></script>
</head>
<body>
<div class="countBox">
<h1>아이디 랜덤 뽑기</h1>
<p>당첨 확인 :</p>
<button>뽑기</button>
</div>
</body>
</html>
[ JS ]
==> 풀이
원래는 로또번호처럼 no매겨서 숫자뽑기를 하면 어떨까 했는데, 이벤트 참여자들은 본인 아이디로 참여할테니
그냥 email 로 추첨하기로 했다.
1. 엑셀에 참여자 아이디를 쭉 적는다 (임의로 abc001~ 로 나열함)
2. vscode 에서 배열화 시킨다.
2-1) 배열화 시킬 내용을 vscode에 붙여넣는다.
2-2) command + [ f1 ] 배열화 한다.
^ (시작) -> ' 로 변경
$ (마지막) -> ', 로 변경
3) js 작성
const btn = document.querySelector("button");
const text = document.querySelector("p");
btn.addEventListener("click", function () {
var idArray = [
"abc001",
"abc002",
"abc003",
"abc004",
"abc005",
"abc006",
"abc007",
"abc008",
"abc009",
"abc010",
"abc011",
"abc012",
"abc013",
"abc014",
"abc015",
"abc016",
"abc017",
"abc018",
"abc019",
"abc020",
];
var rand = (Math.random() * idArray.length) | 0;
var rValue = idArray[rand];
text.textContent = rValue + "님 당첨입니다. ";
});
얼마전 풀었던 hex code 랜덤풀이를 참고해서 해봤는데,
클릭 버튼에 함수 적용하고, 텍스트 넣는게 아직 익숙하지않아서 조금 해맸다.
점점 익숙해지겠지~!
그래도 성공해서 기분좋다!