처음 페이지는 아래의 그림과 같이 text 박스가 있는 상태
text 박스에 댓글쓰면 이렇게 댓글이 달리는 홈페이지 만들기
1. text 박스의 value 가져오기
<body>
<input id="who" type="text" placeholder="입력해주세요." onkeypress="if(event.keyCode==13){reply();}">
<script>
function reply(){
var rep = document.getElementById('who').value;}
</script>
</body>2. 글 추가하기
2-1) insertAdjacentHTML()
글 쓰고싶은 곳에 div로 위치 잡아주고 id를 줌
id를 변수로 저장하고
변수.insertAdjacentHTML(position, text)
2-2) position
position은 아래 있는 단어만 사용 가능
- beforebegin
: element 앞에
- afterbegin
: element 안에 가장 첫번째 child
- beforeend
: element 안에 가장 마지막 child
- afterend
: element 뒤에
2-3) 추가될 text에 style 지정
text 위치에 div style = "~"로 스타일 지정
<body>
<div id="one"></div>
<script>
function reply(){
var d1 = document.getElementById('one')
d1.insertAdjacentHTML('beforeend','<div style="font-size:25px; font-weight:bold;">'+'댓글 : '+rep+'</div>'+'<br>');}
</script>
</body>ref) https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML
3. text 박스 초기화
text입력 event 후 text 박스에 다시 "입력해주세요."라고 뜨게하려면
document.getElementById('who').value = null; 이용
<body>
<input id="who" type="text" placeholder="입력해주세요." onkeypress="if(event.keyCode==13){reply();}">
<script>
function reply(){
document.getElementById('who').value = null;}
</script>
</body>4. code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jina</title>
<link rel="stylesheet" type="text/css" href="jina.css">
</head>
<body>
<div style="font-size:30px; color:green;">안녕</div>
<br>
<input id="who" type="text" placeholder="입력해주세요." onkeypress="if(event.keyCode==13){reply();}">
<br><br>
<div id="one"></div>
<script>
function reply(){
var rep = document.getElementById('who').value;
var d1 = document.getElementById('one')
d1.insertAdjacentHTML('beforeend','<div style="font-size:25px; font-weight:bold;">'+'댓글 : '+rep+'</div>'+'<br>');
document.getElementById('who').value = null;
}
</script>
</body>
</html>'사전스터디' 카테고리의 다른 글
| 자기소개 페이지 만들기2 (0) | 2020.03.16 |
|---|---|
| 자기소개 페이지 만들기 (0) | 2020.03.16 |
댓글