TIL 59일차_error

오늘의 에러들 .. 😹
DOM을 조작하면서 했던 삽질들을 기록한다.
주요 HTML 부분은 아래와 같다.

<form class="submit">
          <label>Room: </label>
          <select class="inputRoom">
            <option value="lobby">로비</option>
            <option value="codeStates" selected="selected">코드스테이츠</option>
          </select>
          <input type="text" class="inputUser" placeholder="Input User" />
          <textarea class="inputChat" placeholder="Input Chat"></textarea>
          <button class="post" type="reset">post</button>
        </form>

이벤트 'change'

<select>안의 option이 바뀌는 이벤트 가 발생할 때마다 특정함수를 실행하고 싶었다.
처음에는 단순히 click이벤트를 입력해서 해보려했는데 잘되지가 않았다...
찾아보니, chang라는 이벤트를 입력하면 쉽게 가능했다.
이벤트에 대해 충분히 공부하지 않았던 것이 이번에 실감났다. 😵

출처:안전제일

버튼 type

post버튼을 누를때마다 함수가 실행하도록 코드를 작성했다.
fetch API를 통해 POST 요청을 제출하는 함수와
DOM에 메시지 하나를 추가하는 함수였는데,
위에 콘솔창에서 보이는 것처럼, 새로고침하듯이 자꾸 초기화되며 함수도 제대로 실행되지 않았다.

검색하여 알아보니,
버튼의 type이 submit이었던 것이 문제였다.

default 값은 submit이다.

양식 제출용 버튼이 아니라면 type 특성을 button으로 지정하는걸 잊지 마세요.
기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (
존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.
(MDN)

위의 코드에서는
button이 <form>안에 있어서 form과 연결되어 있다.

• submit: 버튼이 서버로 form 데이터를 제출한다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용한다.
• reset: 모든 컨트롤을(form 데이터를) 초깃값으로 되돌린다.
• button: 클라이언트측 스크립트와 연결할 수 있다. 기본 행동이 없은 없다.

위는 button 타입을 적용한 결과다.
클릭할때마다 함수가 잘 실행되지만, 폼데이터는 초기화 되지 않아 입력한 내용이 텍스트창에 그대로 남아있다.

위는 reset 타입을 적용한 결과다.
함수도 잘 실행되고, 폼데이터도 클릭할때마다 초기화되어 따로 초기화할 필요가 없다. 😎

참고: mdn 버튼요소