자바스크립트 이벤트 실행 후 페이지가 reload 되는 현상: button에 type 지정해라..

✅문제(problem)

멋사 과제를 하던 중 당황스러운 일이 발생했다. 버튼에 클릭 이벤트를 걸어주었는데 이벤트가 실행되고 나서 바로 reload 되면서 변경사항이 말짱 도루묵이 된 것이다. 왜 이런걸까??

원래 인풋값 넣고 노란 버튼 누르면 아래 글자 바뀌어야 하는데 자꾸 reload됨

 

✅해결(solving)

검색해보니 form 요소 안에 button 이 들어갈 경우, 타입 지정을 따로 해주지 않으면 자동으로 submit으로 설정된다고 한다. button에 타입을 꼭 넣어줘야 하는 것이다!

type="button" 넣어서 해결함

 

 

✅학습(learn)

form 요소 안에 button 이 들어갈 경우, 타입 지정을 button 으로 해주지 않으면 자동으로 submit 으로 지정된다.