[JS]button 클릭시 엉뚱한 폼이 제출되는 문제: preventEvent()

버튼을 클릭하면 display:none 되어있던 div가 나오는 코드를 만들었다.

(div는 css에서 display: none 처리되어있음)

<button id="addScheduleButton" class="btn btn-primary">내 여행 코스에 넣기</button>
<div id="hiddenDiv">
	<p>코스 추가
</div>
<script>
document.getElementById('addScheduleButton').addEventListener('click', function(){
	let hiddenDiv = document.getElementById('hiddenDiv');
	if(hiddenDiv.style.display === 'none'){
		hiddenDiv.style.display = 'block'
	}else{
		hiddenDiv.style.display = 'none';
	}
});
</script>

 

그런데 버튼을 클릭했을 뿐인데 페이지가 이동하려고 하고 다음과 같은 오류가 출력되었다.

org.springframework.dao.EmptyResultDataAccessException: Incorrect result size: expected 1, actual 0

 

콘솔 로그를 확인해보니 같은 페이지에 있는 리뷰 작성 폼이 제출되었고, 필요한 데이터가 모자라서 오류가 발생한 것이었다.

이러한 경우, preventEvent()를 사용해서 기본 동작을 막아야 한다. 스크립트를 다음과 같이 수정해서 해결했다.

<script>
document.getElementById('addScheduleButton').addEventListener('click', function(){
    event.preventDefault();
	let hiddenDiv = document.getElementById('hiddenDiv');
	if(hiddenDiv.style.display === 'none'){
		hiddenDiv.style.display = 'block'
	}else{
		hiddenDiv.style.display = 'none';
	}
});
</script>

 

함수의 첫줄에 코드 한 줄을 추가했다.

event.preventDefault();