텍스트 상자에 입력한 항목을 추가하고, 그 항목을 클릭하면 삭제
2024. 9. 28. 23:56ㆍ정보처리,전산
반응형
<body>
<div id="container">
<h1>TO DO</h1>
<p>할 일 기록</p>
<form action="">
<input type="text" id="subject" autofocus>
<button onclick="newRegister(); return false;">추가</button>
</form>
<hr>
<ul id="itemList">
<li>산책</li>
<li>낮잠</li>
<li>릴스시청</li>
</ul>
</div>
<script>
function newRegister(){
var newItem=document.createElement("li"); //요소 노드 추가
var subject =document.querySelector("#subject");
var newText=document.createTextNode(subject.value);
newItem.appendChild(newText);
var itemList=document.querySelector("#itemList");
itemList.insertBefore(newItem,itemList.childNodes[0]);
subject.value="";
var items=document.querySelectorAll("li");
for (i=0;i<items.length; i++){
items[i].addEventListener("click",function(){
if(this.parentNode)
this.parentNode.removeChild(this);
})
}
}
</script>
</body>
반응형
'정보처리,전산' 카테고리의 다른 글
| 텍스처 전송 시 Lock을 걸어야 하는 이유 (0) | 2024.09.05 |
|---|---|
| 정수형(int)과 부동 소수점형(float) 데이터의 표현 (0) | 2024.09.05 |
| 소프트웨어 테스트 (0) | 2024.07.27 |
| 테스트 오라클 (Test Oracle) (0) | 2024.07.27 |
| 클래스 변수와 인스턴스 변수 (0) | 2024.03.16 |