<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>할인 가격 프로그램</title>
<link rel="stylesheet" href="css/sale.css">
</head>
<body>
<div id="contents">
<img src="resource/sale-g7ae51c613_1280.jpg" alt="세일 사진" width="150">
<ul>
<li>
<label for="originalPrice">원래 가격</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="showResult"></div>
</div>
<script>
function ShowPrice() {
var oprice = document.querySelector('#originalPrice').value;
var rate = document.querySelector('#rate').value;
if(oprice > 0 && rate > 0) {
var savedPrice = oprice * (rate/100);
var resultPrice = oprice - savedPrice;
}
document.querySelector('#showResult').innerHTML = '상품의 원래 가격은'
+ oprice + '원이고' + '할인율은' + rete + '%입니다.' + savedPrice +
'원을 절약한' + resultPrice + '원에 살 수 있습니다.';
}
</script>
</body>
</html>
글자에 오타가 있는줄은 몰랐네요 ㅜ... 정말 감사합니다!!