자바스크립트 개발자 포럼<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<div>
<h2>입력숫자</h2>
<form id='폼'>
<h3></h3>
<input id='입력창'>
<button id='버튼'>입력</button>
</form>
</div>
<div id='결과창'>
<h2>당첨숫자</h2>
<button id='당첨버튼' type="button" onclick='당첨버튼함수()'>당첨공개</button>
<span>맞춘횟수 :</span>
<br>
</div>
<div class='보너스'>
<h3>보너스😜</h3>
</div>
<script>
var 후보군 = Array(45).fill().map(function (요소, 인덱스) {
return 인덱스 + 1;
});
var 입력 = [];
var 폼 = document.querySelector('#폼'),
입력창 = document.querySelector('#입력창'),
버튼 = document.querySelector('#버튼'),
메세지 = document.querySelector('h3');
입력창.type = 'number';
입력창.maxLength = 2;
var 맞춘횟수 = 0;
//✅ 숫자입력
폼.addEventListener('submit', function (event) {
event.preventDefault();
입력.push(parseInt(입력창.value));
공색칠하기(parseInt(입력창.value), 메세지);
입력창.value = '';
입력창.focus();
console.log(입력);
if (입력.length > 6) {
//✅ 초기화
입력 = [];
맞춘횟수 = 0;
맞춘횟수창.textContent = `맞춘횟수 : ${맞춘횟수}`;
메세지.textContent = '숫자를 7번 입력하였습니다.';
setTimeout(function () {
메세지.textContent = '';
}, 1000);
} else {
//✅ 몇번 맞추었는가
맞춘횟수 = 0;
보너스횟수 = 0;
if (입력.join('') == 당첨숫자.join('')) {
setTimeout(function () {
메세지.textContent = '당첨입니다🎉';
}, 1000);
} else {
for (i = 0; i <= 5; i += 1) {
if (당첨숫자.indexOf(입력[i]) > -1) {
맞춘횟수++;
} else if (입력[i] == 당첨숫자[i]) {
보너스횟수++;
}
}
맞춘횟수창.textContent = `맞춘횟수 : ${맞춘횟수}`;
console.log(맞춘횟수);
}
}
});
var 셔플 = [];
while (후보군.length > 0) {
var 이동값 = 후보군.splice(Math.floor(Math.random() * 후보군.length), 1)[0];
셔플.push(이동값);
}
console.log(셔플);
var 보너스 = 셔플[셔플.length - 1],
당첨숫자 = 셔플.slice(0, 6);
console.log(당첨숫자.sort((a, b) => a - b), 보너스)
var 결과창 = document.getElementById('결과창'),
맞춘횟수창 = document.querySelector('span'),
당첨버튼 = document.querySelector('#당첨버튼');
맞춘횟수창.style.display = 'block';
당첨버튼.style.marginBottom = '20px';
function 공색칠하기(숫자, 결과창) {
var 공 = document.createElement('div');
공.textContent = 숫자,
공.style.textAlign = 'center',
공.style.display = 'inline-block',
공.style.border = '1px solid black',
공.style.borderRadius = '50%',
공.style.width = '30px',
공.style.height = '30px',
공.style.marginRight = '10px',
공.style.fontSize = '20px';
var 배경색;
if (숫자 <= 10) {
배경색 = 'red';
} else if (숫자 <= 20) {
배경색 = 'orange';
} else if (숫자 <= 30) {
배경색 = 'yellow';
} else if (숫자 <= 40) {
배경색 = 'blue';
} else {
배경색 = 'green';
}
공.style.backgroundColor = 배경색;
결과창.appendChild(공);
}
//✅ 당첨버튼클릭중복방지
var 클릭 = true;
function 당첨버튼함수() {
if (클릭) {
console.log('클릭됨');
setTimeout(function 비동기콜백함수() {
공색칠하기(당첨숫자[0], 결과창);
}, 1000);
setTimeout(function 비동기콜백함수() {
공색칠하기(당첨숫자[1], 결과창);
}, 1500);
setTimeout(function 비동기콜백함수() {
공색칠하기(당첨숫자[2], 결과창);
}, 2000);
setTimeout(function 비동기콜백함수() {
공색칠하기(당첨숫자[3], 결과창);
}, 2500);
setTimeout(function 비동기콜백함수() {
공색칠하기(당첨숫자[4], 결과창);
}, 3000);
setTimeout(function 비동기콜백함수() {
공색칠하기(당첨숫자[5], 결과창);
}, 3500);
setTimeout(function 비동기콜백함수() {
var 칸 = document.getElementsByClassName('보너스')[0];
공색칠하기(보너스, 칸);
}, 4000);
클릭 = !클릭;
} else {
console.log('중복됨');
}
}
</script>
코드설명
- 입력창에 숫자를 넣어 6번 제출한다.
1 -1. 7번제출했을 시 오류 메세지가 뜬다. - 제출이 완료되었으면 당첨공개 버튼을 눌러 결과를 확인한다.
2 -1. 맞춘횟수로 얼마나 맞췄는지 확인할 수 있다.
- 현재 코드에서 보너스 숫자와 등수를 판별하는 기능은 아직 없습니다.
질문사항
input에 입력한 value가 입력 배열로 들어갈때 숫자가 중복되지 않게 하고 싶습니다.
현재 10입력후 10을 또 입력하면 그대로 반영이되고
맞춘횟수에도 영향이 갑니다.
그래서 in연산자를 통해 시도해본 결과
문자가 아닌이상 숫자는
인덱스 위치에 값이 있는가? 정도로만 판별이 가능한 것 같습니다.
in연산자를 활용한 방법이나 더 효율적인 방법이 있으면 조언 부탁드립니다.