function calc(){
var no1 = document.getElementById("num1");
var no2 = document.getElementById("num2");
var pt = document.getElementById("result");
//html에서 입력되는 모든 value값은 "문자"(value = "" 라서)
var sum = Number(no1.value)+Number(no2.value);
pt.innerText = sum;
}
<script>
function popup(){
var p_no = document.getElementById("p_no").value;
var popup = document.getElementById("popup");
var html = ""; //html코드 누적
var w = 1;
do{
var popupdiv = "<div>"+ w +"</div>"
html += popupdiv;
w++;
}while(w <= Number(p_no))
popup.innerHTML = html;
}
</script>
<body>
팝업창 생성 : <input type="text" id="p_no"><br>
<input type="button" value="생성" onclick="popup()">
<section id="popup" class="popup"></section>
</body>
⚡ select 이벤트 핸들링
onchagne : select에 많이 활용하며 사용자가 선택한 option을 js에 반영하는 이벤트 속성 검색키워드(datalist)에도 활용 가능
this : 해당 하위 태그(자식태그)를 지칭하는 this option태그에 value값이 없을 경우 텍스트가 적용된다.
<script>
//오브젝트 생성 형태는 innerText, innerHTM
//사용자가 키보드 입력형태는 모두 value로 처리함
function selectChange(val){
console.log(val)
document.getElementById("email").value = val;
}
</script>
<body>
이메일 주소 : <br>
<input type="text"> @ <input type="text" id="email">
<select onchange="selectChange(this.value)">
<!-- select 태그안의 자식들의 value값 태워 보내세요-->
<option>직접입력</option>
<option value="naver.com">네이버</option>
<option value="nate.com">네이트</option>
<option value="google.com">구글</option>
</select>
</body>
⚡ 팝업창 오픈 및 데이터 이관
- 본 html(부모창)
<script>
function addPop(){
/*
window.open : 팝업창을 오픈하는 함수
window.open("호출할 주소","","팝업창 사이즈"); 형태
가운데가 비어있음(생략불가)
원래는 팝업창이름 작성 (html의 <title>기능이 생겨 퇴색됨)
*/
window.open("./popup.html","","width=500 height=500");
}
</script>
<body>
<input type="text" id="add_post" maxlength="5" readonly>
<input type="button" value="주소찾기" onclick="addPop()"><br>
<input type="text" id="add_address" readonly><br>
<input type="text" id="address_dtc" placeholder="상세주소 입력">
</body>
- 팝업 html(자식창) self.close(); window.self.close(); : 자신의 창을 강제 종료하는 함수(둘다 같은 기능)
<script>
function closePop(){
//self.close(); : 자신의 창을 강제 종료하는 함수
self.close();
// window.self.close(); 위와 같은기능
}
//li에서 클릭한 이벤트 함수이며, 문자 인자값을 받음
function godata(pdata,adata){
//window.opener : 현재 팝업창을 호출한 부모창을 말함
window.opener.document.getElementById("add_post").value = pdata;
window.opener.document.getElementById("add_address").value = adata;
self.close();
}
</script>
<body>
<p>[도로명 주소]</p>
<ul>
<li onclick="godata('05523','서울시 마포구 대흥동 중앙빌딩')";>
(05523)서울시 마포구 대흥동 중앙빌딩
</li>
<li onclick="godata('01234','서울시 용산구 용산동 하나 아파트')";>
(01234)서울시 용산구 용산동 하나 아파트
</li>
<li onclick="godata('05678','서울시 중랑구 면목동 면목빌딩')";>
(05678)서울시 중랑구 면목동 면목빌딩
</li>
</ul>
<br>
<input type="button" value="창닫기" onclick="closePop()">
</body>
=>
다른 ip에서 팝업창 띄울 경우 CORS - cross-origin 에러.. 해결할줄 알아야함..... ㅠ..
