티스토리 뷰
[01] Event의 처리 (CHECKBOX, RADIO)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function searchW(){
var str = "기획자/설계자/개발자/디자이너";
var strout = "";
var strSplit = str.split('/');
alert('추출된 문자열 갯수: ' + strSplit.length);
// alert() -> window.alert()
for(i = 0; i < strSplit.length; i++){
strout = strout + "▶ " + strSplit[i] + " ";
}
// document.write(strout); // BODY 태그의 내용이 전부 삭제됨.
// 자바 스크립트의 출력은 태그를 검색후 태그에 문자열 형태로 값을 넘깁니다.
var panel = document.getElementById("panel");
panel.innerHTML = panel.innerHTML + "<br><br>" + strout;
}
</script>
<body onload="javascript:searchW();"> <!-- 페이지 시작 시 호출 -->
<div id = "panel">
종각부터 시청역 구간에 열차가 연착되고 있습니다.<br>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
document.frm.product[1].checked =true;
check(document.frm);
}
function check(f){
var wonkum = 0;
var dc = 0;
var selectedImage = 0;
var len = f.product.length;
if(f.product[0].checked == true){
wonkum = 1000000;
selectedImage = f.product[0].value;
}else if(f.product[1].checked == true){
wonkum = 700000;
selectedImage = f.product[1].value;
}else if(f.product[2].checked == true){
wonkum = 400000;
selectedImage = f.product[2].value;
}
dc = wonkum;
if ( f.check1.checked == true) { // 10%
dc = dc - (wonkum * parseFloat(f.check1.value)); // 0.1
}
if ( f.check2.checked == true) { // 5%
dc = dc - (wonkum * parseFloat(f.check2.value)); // 0.05
}
if ( f.check3.checked == true) { // 50%
dc = dc - (wonkum * parseFloat(f.check3.value)); // 0.5
}
f.orderval.value = wonkum;
f.discount.value = dc;
var imgStr = '';
if (selectedImage == 1){
imgStr = "<img src='./images/notebook1.jpg'>";
}else if (selectedImage == 2){
imgStr = "<img src='./images/notebook2.jpg'>";
}else if (selectedImage == 3){
imgStr = "<img src='./images/notebook3.jpg'>";
}
document.getElementById("panel").innerHTML = imgStr;
}
</script>
</head>
<body>
<H1>노트북</H1>
<DIV id="panel"></DIV>
<form name="frm">
[선택]
<INPUT type="radio" name="product" value="1" onclick="check(this.form);">고가제품
<INPUT type="radio" name="product" value="2" onclick="check(this.form);">중가제품
<INPUT type="radio" name="product" value="3" onclick="check(this.form);">저가제품
<br><br>
[할인율]
<INPUT TYPE="checkbox" NAME="check1" value="0.1" onclick="check(this.form);">우수고객
<INPUT TYPE="checkbox" NAME="check2" value="0.05" onclick="check(this.form);">장기고객
<INPUT TYPE="checkbox" NAME="check3" value="0.5" onclick="check(this.form);">국가유공자
<br><br>
[선택한 가격]<INPUT type="text" name="orderval"> <!-- 가격 출력 -->
[할인된 가격]<INPUT type="text" name="discount"> <!-- 가격 출력 -->
</form>
</body>
</html>
'web > javascript' 카테고리의 다른 글
| 카카오 지도 api 이용하기 (0) | 2018.04.01 |
|---|---|
| SELECT ~ OPTION 태그 Event의 처리 (0) | 2018.02.26 |
| BUTTON, SUBMIT 태그의 Event 처리 (0) | 2018.02.23 |
| 함수-confirm, escape, isFinite, eval, split/ innerHTML (0) | 2018.02.22 |
| 제어문, break, javascript 파일의 include 사용 (0) | 2018.02.22 |