[JS, jQuery] 금액,할인율 입력해 할인가격 계산하기

 

    <div id = "contents">
        <ul>
            <li>
                <label for="orginalPrice">정가</label>
                <input type="text" id="originalPrice">원
            </li>

            <li>
                <label for="rate">할인율</label>
                <input type="text" id="rate">%
            </li>

            <li>
                <button onclick="showPrice()">할인가격 계산하기</button>
            </li>
        </ul>

        <div id="result"></div>
    </div>

정가와 할인율은 직접 입력할 수 있도록 input을 만들어주고 

button 클릭시 showPrice() 함수 실행 

 

 

 

 

<script>

    function showPrice(){
        let oPrice = document.querySelector("#originalPrice").value;
        let rate = document.querySelector("#rate").value;

        if(oPrice > 0 && rate > 0){ //음수가 아니라면 
            var savePrice = oPrice * (rate/100);
            var lastPrice = oPrice - savePrice;
        }

        document.querySelector("#result").innerHTML = lastPrice;
    }
</script>

- oPrice라는 변수에 html에서 id가 originalPrice의 값을 저장한다 

- 음수가 아닌 정수만 입력받기 위해 if 안 조건을 넣어준다 (0보다 큰 !)

- savePrice(할인금액) : 정가 * 할인율%

- lastPrice(할인된 최종가) : 정가 - 할인금액 

- innerHTML을 통해 #result에  lastPrice를 입력한다 

 

 

 

실행화면

 

 

 

 

 

여기서 if문 안 변수 지정할때 let으로 했을때는 안되던 걸

var로 바꿔주니까 됐다, 왜지 ?????