위와 같은 랜덤 숫자게임을 만들기 위해 Html에 h1과 form, input 요소를 생성해줍니다.
answer-form은 "hidden"이라는 클래스를 주고
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<body>
<h1>Random Number Game</h1>
<!--제목-->
<form id = "endnumber-form">
<h2>Generate a number between 0 and
<input required
type = "number"
placeholder="number"/>
</h2>
</form>
<!--endnumber-form-->
<form id = "guess-form">
<h3> Guess the number:
<input required
type = "number"
placeholder="number" />
<!--placeholder == 입력필드란에 있는 연한 회색 문구 -->
<button>play!</button>
</h3>
</form>
<!--guess-form-->
<form id = "answer-form" class = "hidden">
<span id ="answer"></span>
<h2 id ="result"></h2>
</form>
<!--answer-form-->
</body>
|
cs |
JS를 이용해 이제 랜덤숫자게임 기능을 만들어 줄 겁니다.
우선 querySelector를 이용해 Js에서 Html 요소에 접근할 수 있게 변수를 만들어 줍니다.
https://taehyeon-smilestudy.tistory.com/22
JS에서 Html의 요소를 변경하는 방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> Document 안녕 ..
taehyeon-smilestudy.tistory.com
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const endnumberForm = document.querySelector("#endnumber-form");
const maxNumber = endnumberForm.querySelector("input");
//첫번째폼
const guessForm = document.querySelector("#guess-form");
const guessInput = guessForm.querySelector("input");
//두번째폼
const answerForm = document.querySelector("#answer-form");
const answer = answerForm.querySelector("#answer");
const result = answerForm.querySelector("#result");
//세번째폼
const HIDDEN_CLASSNAME = "hidden";
//hidden이라는 값을 변수로 지정
|
cs |
function을 이용해 함수를 만들어 줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function play(event){
event.preventDefault();
//form에서 submit을 해도 페이지 새로고침이 안되게 합니다
const max = maxNumber.value;
const random = Math.floor(Math.random()* max)
//Math.random()은 0~1사이의 난수를 생성합니다
//랜덤값에 max를 곱해 랜덤값이 max보다 작은 값으로 나오게 하고
//Math.floor(내림)을 이용해 소수점을 없애줍니다
const guess = parseInt(guessInput.value,10);
//guessInput에 저장되는 값은 string입니다
//그래서 parseInt를 사용해서 숫자로 바꿔줍니다
//parseInt("값",n진법); if(guess === random){
answer.innerText=`you chose: ${max}, the machine chose: ${random}`;
result.innerText=`you won!`;
answerForm.classList.remove(HIDDEN_CLASSNAME);
//answerForm에 있는 classlist중에 HIDDEN_CLASSNAME(hidden)이라는 값을 없앤다.
}
else{
answer.innerText=`you chose: ${max}, the machine chose: ${random}`;
result.innerText=`you lost!`;
answerForm.classList.remove(HIDDEN_CLASSNAME);
}
}
|
cs |
https://taehyeon-smilestudy.tistory.com/21
event 만들기!
function 함수란? => https://taehyeon-smilestudy.tistory.com/17 #4.자바스크립트(javascript) - 기본 함수(function, return) function = 필요할 때마다 호출하여 해당 작업을 반복해서 수행 가능한 함수입..
taehyeon-smilestudy.tistory.com
*Math.random()은 0~1사이의 난수를 무작위로 생성합니다
*input에 저장되는 값을 알아보는 방법
typeof를 사용하면 됩니다.
|
1
2
3
4
5
6
|
function e(event){
event.preventDefault();
console.log(typeof guessInput.value);
}
guessForm.addEventListener("submit",e);
|
cs |
Input에 숫자를 넣고 값을 console.log하면 string이 나오는것을 알 수 있습니다.
그래서 parseInt를 사용해서 숫자타입으로 바꿔서 비교값으로 넣어줍니다.
마지막으로 실행문을 만듭니다.
'코딩이야기 > JS공부' 카테고리의 다른 글
| [JavaScript] - To Do List 만들기② (0) | 2022.07.19 |
|---|---|
| [JavaScript] - To Do List 만들기① (0) | 2022.07.19 |
| [JavaScript] - 로그인 폼 만들기 ② (0) | 2022.07.15 |
| [JavaScript] - 로그인 폼 만들기 ① (0) | 2022.07.15 |
| [JavaScript] - 디데이 타이머 (0) | 2022.07.15 |
