반응형
방명록 만들기, 작성 기능을 구현해보자.
작성자, 글 비밀번호, 내용을 작성하고 작성 버튼을 누르면 새로운 영역에 글이 작성되는 기능이다.
<function a()>
<script>
let cnt = 1;
function a(){
let writer = f.writer.value;
let pwd = f.pwd.value;
let content = f.content.value;
let el = mkDiv (writer, pwd, content);
let list = document.getElementById("list");
list.appendChild(el);
}
<function mkDiv()>
function mkDiv(writer, pwd, content){
let newDiv = document.createElement("div");
newDiv.id = "d_" + cnt++;
newDiv.pwd = pwd;
let html = "";
html += "writer:" +writer+ "<br/>";
html += "content:"+content+"<br/>";
html += "<input type = 'button' value = '수정'>";
html += "<input type = 'button' value = '삭제'>"; //html 위 4개를 아래 innerHTML에 넣어줌.
newDiv.innerHTML = html;
}
</script>
<body>
<body>
<h3>방명록</h3>
<form name = "f">
<table id = "t1">
<tr><th> 작성자</th><td><input type = "text" name = "writer" id = "writer"></td></tr>
<tr><th> 글 비밀번호</th><td><input type = "password" name = "pwd" id = "pwd"></td></tr>
<tr><th> 내용</th><td><input type = "text" name = "content" id = "content"></td></tr>
<tr><th> 작성</th><td><input type = "button" name = "작성" value = "작성" onclick="a()"></td></tr>
</table>
</form>
<div id = "list">
</div>
</body>
- 바디에서 작성자, 비밀번호, 내용 의 값을 사용자에게 받아 "작성" 버튼을 이용해 함수 a() 를 불러낸다. (onclick = "a()")
- <function a()> 에서 각 값의 이름으로 접근해 값을 받아 변수에 담는다.
- 값들을 파라메터에 담아 mkDiv 함수를 불러낸다
- <function mkDiv()> mkDiv 는 div 태그에 감싸서 내용을 프린트 하기 위해 만들었다.
- <function mkDiv()> 새로운 div 태그를 만들어 영역을 추가한다.
- <function mkDiv()> 새 div 태그에 id를 지정하고 비밀번호를 추가한다. 아이디가 겹치지 않도록 cnt 를 추가한다.
- <function mkDiv()> 생성된 div 에 출력할 내용을 담은 변수 html 을 초기화해준다.
- <function mkDiv()> html 위 4개를 아래 innerHTML 에 넣어준다.
- <function mkDiv()> html 내용을 전부 받아 newDiv에 넣어 newDiv를 반환해준다.
- <function a()> mkDiv에서 반환된 값 변수 el로 받아오고, list를 ElementById로 받아온다.
- <function a()> 위 list 의 자식으로 요소를 추가한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#t1, div{
border: 1px solid black;
}
</style>
<script>
let cnt = 1;
function a(){
let writer = f.writer.value;
let pwd = f.pwd.value;
let content = f.content.value; // 입력양식. id가 아닌 이름으로 접근하고 있음, 변수에 담음.(위 세줄)
let el = mkDiv(writer, pwd, content); //(위 내용을 파라메터로 받음) , mkDiv 함수에 다녀온 결과 mkDiv(writer, pwd, content)=newDiv
//mkDiv에서 return 된 값 el로 받아옴
let list = document.getElementById("list"); //list를 get ElementById로 받아와'
list.appendChild(el); //위 list의 자식으로 요소 추가
//이 el을 list 의 자식으로 붙임
}
function mkDiv(writer, pwd, content){ //파라메터로 받음, div 태그에 감싸서 내용을 프린트하기 위해 만듬
let newDiv = document.createElement("div"); //div 요소 하나 생성 (영역을 하나 만들어 새로운 영역에 추가)
// <div id = "d_1" pwd = '111'>
//새 div 태그 생성
newDiv.id = "d_" + cnt++; //고유 id 할당. 생성한 div에 id를 지정. d_1, d_2의 형식. cnt 값을 붙여줌
newDiv.pwd = pwd; // 현재 이 글에 대한 비밀번호 추가. 각각의 비밀번호를 div에서 인식할 수 있도록.
let html = ""; //생성된 div에 출력될 내용을 작성한 변수
html += "writer:"+writer+"<br/>";
html += "content:"+content+"<br/>";
html += "<input type = 'button' value = '수정'>";
html += "<input type = 'button' value = '삭제'>"; //html 위 4개를 아래 innerHTML에 넣어줌.
newDiv.innerHTML = html; //위의 html 내용을 전부 받아옴
return newDiv; //받아온 내용 return
}
</script>
</head>
<body>
<h3>방명록</h3>
<form name = "f">
<table id = "t1">
<tr><th> 작성자</th><td><input type = "text" name = "writer" id = "writer"></td></tr>
<tr><th> 글 비밀번호</th><td><input type = "password" name = "pwd" id = "pwd"></td></tr>
<tr><th> 내용</th><td><input type = "text" name = "content" id = "content"></td></tr>
<tr><th> 작성</th><td><input type = "button" name = "작성" value = "작성" onclick="a()"></td></tr>
</table>
</form>
<div id = "list"> <!-- //id 가 list 인 div에 계속 넣는 것, 우리가 코드를 치는 것과 동일하게 계속 내용이 들어가고 있다. -->
</div>
</body>
</html>
반응형
