1. submit 이벤트 바인딩 잘못된 대상 지정
- 문제 상황: submit 이벤트 호출 지점에서 에러 발생
- 원인: submit 이벤트를 <input> 버튼에 걸어놓았음.
submit 이벤트는 <form>에서 발생하는 이벤트이지 버튼에서는 발생하지 않기때문에 에러 발생
const submit = document.getElementById('submit');
submit.addEventListener('submit', async e => { ... });
const form = document.querySelector('form');
form.addEventListener('submit', async e => { ... });
2. 값을 가져오는 위치와 스크립트 실행 순서
- 문제: submit으로 전달한 값을 가져오지 못함
- 원인: 값을 가져올 때 스크립트 시작 시점에 한 번만 실행하면 그때의 값만 읽는다.
때문에 사용자가 선택을 바꿔도 변수는 업데이트되지 않는다.
// 페이지 로드 시점에 한 번만 읽음 → 이후 변경 무시
const spicylevel = document.getElementById('spicylevel').value;
submitBtn.addEventListener('click', () => {
// 항상 초기값 사용
console.log(spicylevel);
});
- 해결: 값을 submit 이벤트 핸들러 안에서 가져와서 최신 입력을 반영
form.addEventListener('submit', e => {
e.preventDefault();
const spicylevel = document.getElementById('spicylevel').value; // 여기서 읽음
const budget = document.getElementById('budget').value;
const mood = document.getElementById('mood').value;
// ...
});