[자바스크립트] 책들의 수량을 받아와서 합산된 가격과 수량을 구하기

오류 수정 및 주석 달기

 

1. HTML

<h2> 서적 주문 양식 </h2>
<form action="">
     <p> 주문서 </p>
     <table border="1">
         <tr>
             <th> 책 제목 </td><th> 가격 </th> <th> 수량 </th> <th> 합계 </th>
         </tr>
         <tr>
             <td> 멀티미디어 배움터 2.0</td> <td> 25,000원 </td>
             <td> <input id="book1" type="text" size="2" value="0" onclick="this.select();"/> </td>
             <td> <input id="book1Total" type="text" size= "6" value="0"/>원</td>
         </tr>
         <tr>
             <td> 모바일 멀티미디어 </td> <td> 27,000원 </td>
             <td> <input id="book2" type="text" size="2" value="0" onclick="this.select();"/> </td>
             <td> <input id="book2Total" type="text" size="6" value="0"/>원</td>
         </tr>
         <tr>
             <td> 자바입문: 이론과 실습 </td> <td> 25,000원 </td>
             <td> <input id="book3" type="text" size"2" value="0" onclick="this.select();"/> </td>
             <td> <input id="book3Total" type="text" size="6" value="0"/> 원</td>
          </tr>
          <tr>
             <td> 합계 </td> <td> &nbsp; </td>
             <td> <input id="totalNumber" type="text" size="2" value="0"/> </td>
             <td> <input id="totalPrice" type="text" size="6" value="0"/> 원</td>
          </tr>
      </table> <br />
      <input type="button" value="합계계산" onclick="updateAll()"/>
      <input type="reset" value="초기화"/>
 </form>

 

2. SCRIPT

function updateAll(){
    // input의 id값 book1~3의 수량을 가져와서 n1~n3까지 임의의 변수를 만들어서 집어넣습니다.
    var n1 = document.getElementById("book1").value;
    var n2 = document.getElementById("book2").value;
    var n3 = document.getElementById("book3").value;
    
    // 각 책의 가격에 앞에 가져온 책의 수량을 계산해서 p1~p3까지 임의로 변수를 만들어 집어넣습니다.
    var p1 = 25000* n1;
    var p2 = 27000* n2;
    var p3 = 25000* n3;
    
    // 각각 계산된 책의 값을 합계값을 book1Total ~ book3Total 까지 각각 넣어줍니다.
    document.getElementById("book1Total").value = p1;
    document.getElementById("book2Total").value = p2;
    document.getElementById("book3Total").value = p3;
    
    // 수량이 들어갈 곳의 id인 totalNumber에 n1~n3 까지의 합을 계산해서 넣어줍니다.
    // 문자열로 인식해서 정수형으로 바꿔줬습니다.
    // 원래소스 : 1 + 2 + 3 = 123 --> 수정소스 : 1 + 2 + 3 = 6   
    var totalNumber = parseInt(n1) + parseInt(n2) + parseInt(n3);
    document.getElementById("totalNumber").value = totalNumber;
    
    // 책의 총 가격이 들어갈 id인 totalPrice에 p1~p3까지의 합을 계산해서 넣어줍니다.
    var totalPrice = p1 + p2 + p3;
    document.getElementById("totalPrice").value = totalPrice;
 }

 

3. 실행 : http://jsfiddle.net/5rh84Ls8/