문서 객체 모델을 사용하여 자동차 견적 미리보기 페이지 만들기

728x90

728x170

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<!-- 문서 객체 모델을 사용하여 자동차 견적 미리보기 페이지 만들기 -->
<script type="text/javascript">
    function(){
        var basic_car=Number(document.getElementById("total").defaultValue);
 
        for(var i=1; i<=3; i++) {
            var chkObj=document.getElementById("opt+"+i);
            if(chkObj.checked) basic_car += Number(chkObj.value);
        }
 
        document.getElementById("total").value=basic_car;
    }
</script>
</head>
<body>
    <h1>자동차 견적</h1>
<div id="carZone">
    <p><img src="car1.jpg" alt="자동차" /></p>
    <table id="estimate">
        <colgroup>
        <col width="380px" /n>
        <col width="160px" />
        <col width="*" />
        </colgroup>
        <thread>
        <tr>
        <th scope="row">옵션</th>
        <th scope="row">추가 가격</th>
        <th scope="row">선택</th>
        </tr>
        </thread>
    <tfoot>
    <tr>
        <th scope="col">(기본)차량가격</th>
        <td colspan="2">
            <input type="text" name="total" id="total" value="13450000" readonly="readonly" />
        </td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td><label for="opt1">인조가죽시트</label></td><td>250000</td>
        <td>
        <input type="checkbox" name="opt1" id="opt1" value="250000" onclick="car();"/></td>
    </tr>
    <tr>
        <td><label for="opt2">내비게이션</label></td><td>250000</td>
        <td>
        <input type="checkbox" name="opt2" id="opt2" value="250000" onclick="car();"/></td>
    </tr>
    <tr>
        <td><label for="opt3">선루프</label></td><td>440000</td>
        <td>
        <input type="checkbox" name="opt3" id="opt3" value="440000" onclick="car();"/></td>
    </tr>
    </tbody>
    </table>
</div>
</body>
</html>
Colored by Color Scripter

cs

소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)

728x90

그리드형(광고전용)

저작자표시

'Source Code > JavaScript' 카테고리의 다른 글

이벤트 등록 메서드가 브라우저별로 서로 다르게 실행되도록 하기 (0)	2017.05.21
이벤트 (Event) (0)	2017.05.21
함수를 사용하여 사진 갤러리 만들기 (0)	2017.05.21
함수 (Function) (1)	2017.05.21
폼 요소 선택자 (0)	2017.05.21
문서 객체에 이벤트 핸들러 적용 (0)	2017.05.21
선택자 호환성 문제 해결 (0)	2017.05.21
문서 객체 모델 (DOM) (0)	2017.05.21