[JS] 랜덤 숫자 놀이

프로그램 설명

1. 사용자가 수의 최댓값을 입력한다. (단, 수는 0부터 시작하고 정수만 가능하다)
2. 사용자는 최댓값 범위 안의 수에서 하나의 수를 고른다.
3. Play!  버튼을 누르면 범위 안에서 랜덤한 수가 등장한다.
4. 랜덤한 수와 사용자가 입력한 수가 일치하면 "You Win!"을, 일치하지 않으면 "You Lose!"를 출력한다. 

 

프로그램 설계

1. 사용자에게 범위의 최댓값과 최댓값 범위 안의 수 하나를 입력받는다.

이때, 입력받은 수는 설정한 범위 안의 수여야 한다.

2. 두 수를 입력받고 Play! 버튼을 누른다.

이때, 입력받은 수가 최댓값보다 크다면, 버튼은 비활성화 상태로 변경한다. 

3. 랜덤 수가 생성된다.

4. 랜덤 수와 입력받은 수를 비교해서 동일한지 확인한다.

5. 결과를 화면에 출력해 준다.

 

배운 내용

Math.Ramdom()에서 두 수 사이의 랜덤 값 얻고 싶으면 Math.Random() * (max - min) + min

button disabled = true // 버튼 보이지 않기 (default)
button disabled = false // 버튼 보이기 

 

문제 상황

1. input에서 사용자가 입력한 값 가져오기
addEventListener(’input’, 함수); 사용하면 가져올 수 있는데 다르게 작성해도 실행이 되지 않음.

=> HTML 파일에서 <script> 문을 작성하지 않아서 발생한 문제

2. document.querySelectAll(); 에 이벤트 리스너 붙일 수 없음.
'not a function' 에러 발생

=> querySelectAll()에는 이벤트 리스너를 붙이지 못한다. 이벤트 리스너를 사용하고 싶다면 반복문을 통해 하나씩 연결해줘야 한다.

두 군데서 사용되던 class였는데, 각자 다른 id를 붙여줘서 따로 붙여줬다. 각자 다른 이벤트를 적용해서 오히려 좋았다.

3. myNum의 값이 최댓값보다 큰 경우, alert() 창 띄우고 이후에 myNum을 공백으로 변경해주고 싶어서 innerText = “”, innerHtml =”” 을 사용했는데 둘 다 적용되지 않았다.

=> input 요소의 안의 값을 변경해 주는 과정이기 때문에 myNum.value = ""; 로 작성했어야 한다.

 

작성 코드

https://github.com/kimsudang/projects-for-study/tree/de79a53876ac8820b4e265c8f20c46ac25d501ed/two-number-comparison

projects-for-study/two-number-comparison at de79a53876ac8820b4e265c8f20c46ac25d501ed · kimsudang/projects-for-study