728x90
반응형
//추가 버튼이 클릭 되었을 때
document.getElementById("add").addEventListener("click",function(){
//div 요소 생성
const div = document.createElement("div");
//div에 row 클래스 추가
div.classList.add("row");
//------------------------------
//input 요소 생성
const input = document.createElement("input");
//input in 클래스 추가
input.classList.add("in");
//input에 "type" 속성, "number" 속성 값 추가(type="number")
// -요소.setAttribute("속성","속성값") : 요소에 속성/속성값 추가
input.setAttribute("type","number");
//------------------------------
//span 요소 생성
const span = document.createElement("span");
//span remove 클래스 추가
span.classList.add("remove");
//span 내용으로 "x"추가
span.innerText = "x";
// span이 클릭 되었을 때에 대한 이벤트 동작 추가
span.addEventListener("click",function(){
// 요소.praentElement : 부모요소
//요소.remove() : 요소제거
//부모.(.row)제거
span.parentElement.remove();
})
// ------------------------------------------
// div 내부에(자식으로) input, span 순서대로 추가
div.append(input);
div.append(span);
// #container에 div를 마지막 자식으로 추가
document.getElementById("container").append(div);
})
//계산 버튼 클릭시 이벤트 동작
document.getElementById("calc").addEventListener("click",function(){
//합계 저장용 변수
let sum = 0;
// in클래스 요소를 모두 얻어옴 - > 배열 형태
const list = document.getElementsByClassName("in");
//배열용 향상된 for문 (for...of)
for(let input of list){
//sum에 입력값 누적
// -> input에 잓어된 값은 string -> 숫자 변환 필요
sum += Number(input.value);
//Number("") ==0 // 빈칸은 0으로 변환됨
}
//sum을 alert로 출력
alert("합계 :" + sum)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13_요소추가제거</title>
<style>
/* 한 줄 */
.row{
margin: 5px 0;
}
/* input 태그 */
.in{width:100px;}
/*span 태그 (x버튼)*/
.remove{
display: inline-block;
border : 1px solid black;
width:20px;
text-align: center;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
margin-left:5px;
}
</style>
</head>
<body>
<div id="container">
<div class="row">
<input type="number" class="in">
</div>
<!-- <div class="row">
<input type="number" class="in"><span class="remove">x</span>
</div> -->
</div>
<button id="add">추가</button>
<button id="calc">계산</button>
<script src="js/13_요소추가제거.js"></script>
</body>
</html>
728x90
반응형