<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>admin.html</title>
<link href="css/mystyle1.css" rel="stylesheet" />
</head>
<body>
<div class="container6">
<a href="admin.html?menu=1">물품관리</a>
<a href="admin.html?menu=2">물품등록</a>
<a href="admin.html?menu=3">게시물관리</a>
<a href="admin.html?menu=4">회원관리</a>
<hr />
<div id="menu1">
<h3>물품관리</h3>
<input type="number" id="txt1" placeholder="숫자1" />
<input type="number" id="txt2" placeholder="숫자2" />
<input type="text" id="txt3" placeholder="+ - * / %만 가능" />
<input type="button" id="btn1" value="계산하기" />
<div id="out1">결과표시</div>
</div>
<div id="menu2">
<h3>물품등록</h3>
<div id="item">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<input type="button" value="항목추가" id="btnadd" />
<input type="button" value="항목삭제" id="btndel" />
</div>
<div id="menu3">
<h3>게시물관리</h3>
</div>
<div id="menu4">
<h3>회원관리</h3>
</div>
</div>
<script>
const m1 = document.getElementById("menu1"); // select
const m2 = document.getElementById("menu2");
const m3 = document.getElementById("menu3");
const m4 = document.getElementById("menu4");
console.log(window.location);
console.log(window.location.search);
// 물품관리를 누르면 물품관리만 뜨도록
if(window.location.search === '?menu=1' || window.location.search === ""){
m1.style.display="";
m2.style.display="none";
m3.style.display="none";
m4.style.display="none";
//selector 5개
const txt1 = document.getElementById('txt1');
const txt2 = document.getElementById('txt2');
const txt3 = document.getElementById('txt3');
const btn1 = document.getElementById('btn1');
const out1 = document.getElementById('out1');
//버튼 이벤트
btn1.addEventListener('click', function() {
if(txt3.value === "+"){
out1.innerHTML = Number(txt1.value) + Number(txt2.value); // 넣는거 innterHTML
}
else if(txt3.value === "-"){
out1.innerHTML = Number(txt1.value) - Number(txt2.value);
}
else if(txt3.value === "*"){
out1.innerHTML = Number(txt1.value) * Number(txt2.value);
}
else if(txt3.value === "/"){
out1.innerHTML = Number(txt1.value) / Number(txt2.value);
}
else if(txt3.value === "%"){
out1.innerHTML = Number(txt1.value) % Number(txt2.value);
}
});
}
else if(window.location.search === '?menu=2'){
m1.style.display="none";
m2.style.display="";
m3.style.display="none";
m4.style.display="none";
// selector 수행
const btnadd = document.getElementById('btnadd');
const btndel = document.getElementById('btndel');
const item = document.getElementById('item');
btnadd.addEventListener('click', function(){
// <input>
const i1 = document.createElement("input");
// <input type="text" />
i1.setAttribute("type", "text");
// <input type="text" style="width: 50px" />
i1.setAttribute("style","width: 50px;");
item.appendChild(i1);
// item.innerHTML += `<input type="text" style="width: 50px">`
// <img>
const i2 = document.createElement("img");
i2.setAttribute("src", "imgs/aaa.jpg");
i2.setAttribute("style", "width: 50px; height: 50px;");
item.appendChild(i2);
});
btndel.addEventListener('click', function(){
// console.log(item.childElementCount);
// 자식이 존재하면 = <div>태그에 태그들이 있다면
if(item.childElementCount>0){
item.removeChild(item.lastChild);
item.removeChild(item.lastChild);
}
});
}
else if(window.location.search === '?menu=3'){
m1.style.display="none";
m2.style.display="none";
m3.style.display="";
m4.style.display="none";
}
else if(window.location.search === '?menu=4'){
m1.style.display="none";
m2.style.display="none";
m3.style.display="none";
m4.style.display="";
}
</script>
</body>
</html>
20211208-