document에 관하여
document.getElementById("id"); // 요소 한 개
document.getElementsByTagName("태그명"); // 배열 반환
요소.속성 = 값 == 요소.setAttribute("속성명", "값");
alert(요소, 속성); == 요소.getAttribute("속성명");
요소.setAttribute("속성명", "값");
document.createElement("태그명");
부모요소.appendChild("새요소");
부모요소.removeChild(삭제요소);알게된 것들
display
display disabled는 자리 차지하는데 none인거고
display none은 자리 차지 않는 none 이다.
img
img는 id가 아니라 name으로 넣어야해
방명록
익명 방명록을 만들어서
작성자, 내용, 비밀번호를 입력한다.
수정 삭제를 할 수 있는데 비밀번호가 같아야 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#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;
let el = mkDiv(writer, pwd, content);
let list = document.getElementById("list");
list.appendChild(el);
f.writer.value = "";
f.pwd.value = "";
f.content.value = "";
}
function mkDiv(writer, pwd, content) {
let newDiv = document.createElement("div");//새 div태그 생성 <div id="d_1" pwd='111'>
newDiv.id = "d_" + cnt;//생성한 div에 id 지정. d_cnt
newDiv.pwd = pwd;
let html = ""; //생성된 div에 출력될 내용
html += "writer:<span id='w_"+cnt+"'>" + writer + "</span><br/>";
html += "content:<span id='c_"+cnt+"'>" + content + "</span><br/>";
html += "<input type='button' value='수정' onclick=editForm(" + cnt
+ ")>"; //editForm(2)
html += "<input type='button' value='삭제' onclick=del(" + cnt + ")>";
newDiv.innerHTML = html;
cnt++;
return newDiv;
}
function editForm(cnt) {
let editDiv = document.getElementById("d_" + cnt); //수정할 글의 div
let editForm = document.getElementById("editf");
editDiv.appendChild(editForm);
let writer = document.getElementById("w_" + cnt).innerHTML;
let content = document.getElementById("c_" + cnt).innerHTML;
document.getElementById("editwriter").value = writer;
document.getElementById("editcontent").value = content;
document.getElementById("editbtn").cnt = cnt;//버튼에 cnt속성을 추가해서, 수정 글번호를 저장
editForm.style.display = '';
}
function cancel() {
let editForm = document.getElementById("editf");
editForm.style.display = 'none';
document.getElementsByTagName("body")[0].appendChild(editForm);
}
function edit() {
let cnt = document.getElementById("editbtn").cnt;
let editDiv = document.getElementById("d_" + cnt);
let pwd2 = document.getElementById("editpwd").value;//수정폼에 입력한 글 비밀번호
if (editDiv.pwd != pwd2) {
alert("글 비밀번호 불일치. 수정불가");
} else {
let newWriter = document.getElementById("editwriter").value;
let newContent = document.getElementById("editcontent").value;
document.getElementById("w_" + cnt).innerHTML = newWriter;
document.getElementById("c_" + cnt).innerHTML = newContent;
}
document.getElementById("editwriter").value = "";
document.getElementById("editcontent").value = "";
document.getElementById("editpwd").value = "";
cancel();
}
function del(cnt) {
let pwd = prompt("글 비밀번호");
let delDiv = document.getElementById("d_" + cnt);
if (pwd == delDiv.pwd) {
document.getElementById("list").removeChild(delDiv);
}else{
alert("글 비밀번호 불일치. 삭제취소");
}
}
</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" value="작성" onclick="a()"></td>
</tr>
</table>
</form>
<div id="list"></div>
<!-- 수정폼 -->
<table id="editf" style="display: none;">
<tr>
<th>작성자</th>
<td><input type="text" name="editwriter" id="editwriter"></td>
</tr>
<tr>
<th>글 비밀번호</th>
<td><input type="password" name="editpwd" id="editpwd"></td>
</tr>
<tr>
<th>내용</th>
<td><input type="text" name="editcontent" id="editcontent"></td>
</tr>
<tr>
<th>수정완료</th>
<td><input type="button" value="수정완료" id="editbtn"
onclick="edit()"> <input type="button" value="취소"
onclick="cancel()"></td>
</tr>
</table>
</body>
</html>