반응형
1단계 : HTML / Javascript 로 구현하기
- 구현 : 입력을 완료한 후 제출하면 입력한 값이 노출된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>방명록</title>
</head>
<body>
<form name="send-msg" id="sendMsg">
<div class="inputForm">
<label for="userId">작성자</label>
<input type="text" name="name" id="userId" placeholder="이름">
</div>
<div class="inputForm">
<label for="msg">내용</label>
<input type="textarea" name="message" id="msg" placeholder="내용을 입력하세요">
</div>
<div class="inputForm">
<label for="userPw">비밀번호</label>
<input type="password" name="password" id="userPw" placeholder="비밀번호 입력">
</div>
<button type="submit">방명록 남기기</button>
</form>
<ul id="message">
</ul>
<script>
document.getElementById("sendMsg").addEventListener("submit",function(e){
e.preventDefault();
var name = document.getElementById("userId").value;
var message = document.getElementById("msg").value;
var password = document.getElementById("userPw").value;
if(name === "" || message === "" || password === ""){
if(!name){
alert("작성자를 입력하세요");
}
if(!message){
alert("내용을 입력하세요");
}
if(!password){
alert("비밀번호를 입력하세요");
}
}
const newLi = document.createElement("li");
newLi.innerHTML=`
<p class="name">${name}</p>
<p class="message">${message}</p>
`;
document.getElementById("message").prepend(newLi);
//폼 비우기
e.target.name.value = "";
e.target.message.value = "";
e.target.password.value = "";
})
</script>
</body>
</html>- 기능
- submit 이벤트리스너 등록
- 사용자가 폼을 제출할때마다 실행된다.
- e.preventDefault(); : 폼을 제출할때 기본적으로 새로고침 되는데, 이 기본 동작을 방지한다. 이를 막지 않으면 제출할때마다 새로고침되는 현상이 나옴.
<form name="send-msg" id="sendMsg">
//input 요소 생략
<button type="submit">방명록 남기기</button>
</form>
<script>
document.getElementById("sendMsg").addEventListener("submit",function(e){
//실행코드 작성
})
</script>
- if문 유효성 검사
- 유효성 검사 후 실제 입력 값이 추가되도록
-
<ul id="message">여기에 li 태그들이 추가되도록 할거다.</ul>
- 우선은 새로운li 요소를 동적으로 추가한다 : createElement ("li");
- 앞의 input들의 value값을 변수로 저장해두었는데, ${변수명} 으로 각 저장해둔 닶을 나타나게 해준다.
-
const newLi = document.createElement("li");
newLi.innerHTML=`
<p class="name">${name}</p>
<p class="message">${message}</p>`;
document.getElementById("message").prepend(newLi)
끝난줄 알았겟지만 여기서 문제점은 폼을 제출하였는데 인풋에 값이 계속 남아있는것이다.
- 폼 비워주기
name.value = "";
message.value = "";
password.value = "";- 왜 안없어질까?
- 위에 선언했던 name, message, password 의 변수는 이미 HTML 요소의 값을 가져온 그냥 문자열이기 때문이다.
- 그럼 어떻게 삭제시키냐?
- document.getElementById("userId").value = ""; 이런식으로 HTML 요소를 참조하여 접근해야한다.
- e.target.name.value=""; 로 이벤트가 발생한 타겟을 가르켜 폼 요소로 접근한다.
- 쨋든 중요한건 인풋 요소에 정확하게 접근하여야 한다.
이까지 하면 파이어 베이스를 사용하기 전까지 구현은 완성되었다 !
하지만 여기서 또 문제점은...
새로고침하면 기록했던 방명록들이 다 사라진다 ㅠㅠ
2단계는 파이어 베이스를 이용하여 새로고침 하여도 이전에 기록하였던 방명록이 남아있도록 구현하겠다!!
아무튼 여기까지는 작은 실수만 신경쓰면 구현이 쉬운편이다 !
실수 요인
- e.preventDefault(); : 기본 제출동작 막기
- input요소에 정확하게 접근하기.
반응형
LIST
'Today I Learned' 카테고리의 다른 글
| 미니프로젝트-팀소개페이지 (3) | 2024.12.30 |
|---|---|
| firebase를 이용한 방명록 기능 구현하기 - javascript [2단계] (2) | 2024.12.30 |
| 배포 그게 대체 뭔데? (0) | 2024.12.26 |
| Git 을 알아보자 (2) | 2024.12.23 |
| Fetch 사용하기! (1) | 2024.12.18 |
