레벨1 모듈 공백 체크 관련해서 질문드립니다.

[MD]

document.getElementById('modal-form').addEventListener('submit', function(e){
   if (emailInputValue === '') {
        e.preventDefault();
        alert('이메일을 입력하세요!');
     }
});

 

자바스크립트 코드를 이런 식으로 작성했습니다.

그런데 이상한 문제가 몇 가지 있습니다. 

1. 이벤트 리스너를 주기 전 form 태그만 추가했을 때 맨 처음 한 번은 전송 버튼을 눌렀을 때 새로고침이 되지만 그 이후에는 반응이 없습니다. action='login.php'을 추가하면 전송 버튼을 누르면 4o4 not found가 뜹니다.

 

2. 이벤트 리스너를 준 이후에 email input에 아무런 값을 넣지 않았을 때 alert 창이 잘 뜹니다. 그런데 이메일 값을 넣어도 alert 창이 계속 뜹니다. 새로고침은 안 되면서요.

 

3. email input에 값을 넣고 전송버튼을 누르면 2번 문제에선 alert창이 뜰 때도 있다고 했었는데 어쩔 때는 alert창이 뜨진 않지만 새로고침도 되지 않는 문제가 발생합니다.

 

문제가 다양하게 나타나서 좀 당황스러운데요.. 같은 코드인데 왜 어떨 때는 되고 어떨 때는 안 되는지 궁금합니다.

[codingapple]

아마도 emailInputValue 변수만드는 곳이 이상하거나 그래서 그런듯 합니다 

옮겨보도록 합시다 

[MD]

변수를 처음에는 콜백함수 밖에 만들었다가 이상한 거 같아서 조건문 위에 옮겼는데도 동일하게 발생하네요.

 

지금 계속 시도 중인데 처음에는 이메일을 넣으면 새로고침이 되는데 두 번째부터는 안 되네요. 원래 이런건가요? 아예 브라우저를 닫고 처음 열었을 때 최초에만 되고 그 뒤부터는 안 됩니다 ㅠㅠ

[codingapple]

전송버튼을 누르면 아까 그 변수만들어달라고 코드짜봅시다 

[MD]

document.getElementById('sendBtn').addEventListener('click', function (e){
       if (document.getElementById('email').value === '') {
            e.preventDefault();
            alert('이메일을 입력하세요!');
          } else {
            window.location.reload();
          }
});

id='sendBtn'은 모달창의 전송버튼에 준 id입니다.

 

선생님 제가 생각하던 화면 모습(?)은 이렇게 하면 됩니다. 이메일을 입력 안 하면 알림창이 뜨고 이메일에 값이 들어있으면 전송버튼을 눌렀을 때 새로고침 되는 걸 제가 원했거든요. 제가 바라던 모습은 만들긴 했는데 선생님이 작성하신 코드랑 좀 많이 다른 점 때문에 궁금증이 생깁니다. 이렇게 코드를 짜게 되면 추후에 무슨 문제가 생길 수 있을까요? 가령 저는 단순히 새로고침을 하는 코드를 추가했는데 이게 submit이 발생했을 때랑 다른 결과를 만든다던가 등의 예상문제(?)가 있는지 궁금합니다.

[codingapple]

sendBtn에 type="submit" 넣으면 아까랑 똑같습니다 그럼 폼전송될걸요

[글쓴이]

글