Javascript와 CSS 개념 등의 기본적인 부분들을 복습하고 헷갈리는 부분들을 정리하고자 자바스크립트 토이 프로젝트를 시작했다.
먼저, 숫자야구 게임!
(사용자가 입력한 네자리 숫자와 컴퓨터가 제공하는 네자리 숫자를 비교하여
컴퓨터가 제공하는 숫자를 사용자가 맞추는 게임)
어째 순조롭게 진행된다 싶었는데 만난 첫번째 오류
input.value를 가져와야하는데 input 자체를 인식을 못한다..
이것 저것 검색을 했더니 vscode가 최신 버전이 아니면 그럴 수 있다네?
하지만 나는 최신버전을 사용중인걸...?🤭
console.log(input)을 아무리해도 안나오는걸로봐서는 input태그 자체를 인식을 못하는듯했다.
여러가지 방법을 찾아봤더니 form 태그 안에 넣어주고 name도 지정 해주면 컴퓨터가 인식을한다는것을 찾았다
form 태그는 배우기는했지만 사용한적이 없어 이번에도 사용하지않았는데..
정말 저것때문일까? 하는 반신반의한 마음으로 form 태그를 사용해서 그 안에 input 값을 넣었더니
어머!!! 되잖아!!
<form>
<label for="question"></label>
<input type="number" id="question" name="question" min="0" max="9999" class="input-zone" />
<button class="btn-zone">도전</button>
</form>혹시 몰라 컴퓨터가 이 부분이 input임을 더 잘 수 있도록 form 내부에 label태그를 달아 사용하였다.
그런데 여기서 문제..
form 태그를 사용하고 form태그 내부에있는 버튼에 달아둔 함수를 동작시키니 함수 동작 후 페이지가 다시 로드되면서 함수들이 0.1초정도만 동작하고(🤦🏻♀️) 초기 화면으로 돌아오는 현상이 반복되었다.
아 이거.. 이거 배웠는데!!!?
👩🏻🎓: 서버 액션이 필요하지 않은 상황에 form에 submit이 발생하면 submit이벤트가 발생하면서 페이지가 reload된다.
선생님의 모든 말을 적어둔 나에게 칭찬을 ..✨
해결방법
📍 버튼을 form 태그 밖으로 뺀다.
📍 제출 버튼을 만들 때, type을 ‘button’으로 명시한다.
📍 자바스크립트 이벤트 실행 시, event.preventDefault() 추가한다.
function (e) {
...어쩌구 코드들..
e.preventDefault();
}나는 함수에 event.preventDefault()를 사용해서 form이 submit 될 때 event의 동작을 중단시켜주었다.
