반응형
문제
1~5개의 주사위의 갯수를 받아 각각의 주사위 값을 화면에 출력하시오.
- 함수의 결과값을 object type으로 만들고 화면 출력을 아래와 같이 하시오.
- 조건에 맞는 주사위의 갯수를 입력하지 않을시 메세지를 출력하시오.
Ex) A : 4 , B : 5
해법
1. n개의 주사위를 입력 했을 때 주사위의 결과를 출력하는 함수를 작성합니다.
const getDiceNumber = (_num) => {
if (_num > 5 || _num < 1){
return 'The number of dice has been exceeded.'
}
else{
//난수의 배열
let ranNum = [];
//알파벳 문자열
const alpha = ['A', 'B', 'C', 'D', 'E'];
//결과값 object
const dice = {}
for (let i = 0; i < _num; i++){
//1~6까지의 난수
ranNum[i] = Math.floor((Math.random() * (6)) + 1)
//객체에 Key와 value를 입력
dice[alpha[i]] = ranNum[i]
}
//주사위의 갯수에 따른 결과값 출력
if (dice.B === undefined){
return `A : ${dice.A}`
}
else if (dice.C === undefined){
return `A : ${dice.A}, B : ${dice.B}`
}
else if (dice.D === undefined){
return `A : ${dice.A}, B : ${dice.B}, C : ${dice.C}`
}
else if (dice.E === undefined){
return `A : ${dice.A}, B : ${dice.B}, C : ${dice.C}, D : ${dice.D}`
}
else {
return `A : ${dice.A}, B : ${dice.B}, C : ${dice.C}, D : ${dice.D}, E : ${dice.E}`
}
//object에 Key와 value를 넣는 법
//object.Key = value;
//object['str'] = value
}
}
2. 1번의 함수를 화면에 출력하는 이벤트를 생성합니다.
document.addEventListener('DOMContentLoaded', () => {
const titleTag = document.createElement('h1');
titleTag.textContent = 'GET DICE NUMBERS'
document.body.appendChild(titleTag)
const inputTag = document.createElement('input');
inputTag.value = 'Enter 1 to 5 Numbers'
document.body.appendChild(inputTag)
const buttonTag = document.createElement('button');
buttonTag.textContent = `ENTER`
document.body.appendChild(buttonTag)
const ranNumDivTag = document.createElement('div')
document.body.appendChild(ranNumDivTag)
const ranNumTag = document.createElement('h2')
ranNumDivTag.appendChild(ranNumTag)
buttonTag.addEventListener('click', () => {
const dice1 = getDiceNumber(Number(inputTag.value))
ranNumTag.textContent = `${dice1}`
Code
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
const getDiceNumber = (_num) => {
if (_num > 5 || _num < 1){
throw 'The number of dice has been exceeded.'
}
else{
//난수의 배열
let ranNum = [];
//알파벳 문자열
const alpha = ['A', 'B', 'C', 'D', 'E'];
//결과값 object
const dice = {}
for (let i = 0; i < _num; i++){
//1~6까지의 난수
ranNum[i] = Math.floor((Math.random() * (6)) + 1)
//객체에 Key와 value를 입력
dice[alpha[i]] = ranNum[i]
}
//주사위의 갯수에 따른 결과값 출력
if (dice.B === undefined){
return `A : ${dice.A}`
}
else if (dice.C === undefined){
return `A : ${dice.A}, B : ${dice.B}`
}
else if (dice.D === undefined){
return `A : ${dice.A}, B : ${dice.B}, C : ${dice.C}`
}
else if (dice.E === undefined){
return `A : ${dice.A}, B : ${dice.B}, C : ${dice.C}, D : ${dice.D}`
}
else {
return `A : ${dice.A}, B : ${dice.B}, C : ${dice.C}, D : ${dice.D}, E : ${dice.E}`
}
//object에 Key와 value를 넣는 법
//object.Key = value;
//object['str'] = value
}
}
document.addEventListener('DOMContentLoaded', () => {
const titleTag = document.createElement('h1');
titleTag.textContent = 'GET DICE NUMBERS'
document.body.appendChild(titleTag)
const inputTag = document.createElement('input');
inputTag.value = 'Enter 1 to 5 Numbers'
document.body.appendChild(inputTag)
const buttonTag = document.createElement('button');
buttonTag.textContent = `ENTER`
document.body.appendChild(buttonTag)
const ranNumDivTag = document.createElement('div')
document.body.appendChild(ranNumDivTag)
const ranNumTag = document.createElement('h2')
ranNumDivTag.appendChild(ranNumTag)
buttonTag.addEventListener('click', () => {
const dice1 = getDiceNumber(Number(inputTag.value))
ranNumTag.textContent = `${dice1}`
})
})
</script>
</head>
<body>
</body>
</html>
Get Dice numbers
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] checkbox 전체 설정하기 (0) | 2022.05.02 |
|---|---|
| [JavaScript] 과일 상자 추가하기 (table 추가 예제) (0) | 2022.05.02 |
| [JavaScript] 원주율에 따른 원의 넓이, 둘레 구하기 (예제) (0) | 2022.04.27 |
| [JavaScript] Event +예제 (0) | 2022.04.26 |
| [JavaScript] DOM (문서 객체) (0) | 2022.04.25 |