number guessing game(과제3)

const generateNum = document.getElementById("generateNum");
const guessNum = document.getElementById("guessNum");
const btn = document.getElementById("btn");
const printDiv = document.getElementById("printDiv");
const youChoseNum = document.getElementById("youChoseNum");
const machineChoseNum = document.getElementById("machineChoseNum");
const won = document.getElementById("won");
const lost = document.getElementById("lost");

const CLASS_HIDDEN = "hidden";

function submitBtn(event) {
  event.preventDefault();
  printDiv.classList.remove(CLASS_HIDDEN);
  const randomNum = Math.floor(
    Math.random() * (parseInt(generateNum.value) + parseInt(1))
  ); // parseInt로 정수 변환하여 덧셈연산 해준다.
  youChoseNum.innerText = guessNum.value;
  machineChoseNum.innerText = `${randomNum}.`;
  if (guessNum.value == randomNum) {
    won.classList.remove(CLASS_HIDDEN);
    lost.classList.add(CLASS_HIDDEN);
  } else {
    lost.classList.remove(CLASS_HIDDEN);
    won.classList.add(CLASS_HIDDEN);
  }
}

btn.addEventListener("click", submitBtn);

이번 과제의 핵심은 랜덤 숫자를 생성하는 일이다.
사용자가 지정한 숫자 범위에서 랜덤한 숫자를 찾아햐한다.

랜덤 숫자 조건: 0이상 입력값(지정값) 이하
Math.random() : 0이상 1미만의 수 생성
generateNum.value 에 1을 더한 후에 Math.random()을 곱해주어야 0을 포함하는 조건에 들어맞는다.
0을 포함하기 위해서는 Math.floor()를 사용해야만 한다.
여기서 generateNum.value 와 1 둘다 parseInt()를 사용하여 정수로 변환해야 오류가 나지 않는다.
정수변환 없이 generateNum.value + 1 하면 // 3+1 = 31 이런 식으로 값이 반환된다.

// 0이상 10미만의 랜덤한 정수 생성
Math.floor(Math.random() * 10)      

// 1이상 11미만의 랜덤한 정수 생성 
Math.floor(Math.random() * 10) + 1 

classList.add, classList.remove를 사용하여 태그 내 클래스 속성을 추가 또는 제거하여 브라우저 화면에 표시되는 부분을 제어한다. (display:none, 화면 상에 요소가 차지하는 공간이 사라짐)

---

• 선택한 요소의 속성값을 설정한다.
  element.setAttribute('attribute_name','attribute_value');

• js에서 html 태그의 내부 문자를 가져올때 사용한다.
  innerHTML : 태그를 인식하여 태그를 적용시킨 후 문자를 보여준다.
  innerText : 해당 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어온다.
  textContent :'Node'의 속성으로, innetText와는 달리 <script>나 <style> 태그와 상관없이 해상 노드가 가지고 있는 텍스트 값을 그대로 읽어온다.