인프런 커뮤니티 질문&답변
작성한 질문수
선생님 강의를 듣고 작성해봤는데 코드가 안먹는 이유를 모르겠습니다 ㅠ
작성
·
218
0
<section class="java2">
<img src="img/3.png" alt="" />
<ul>
<li>
<label for="original">원가:</label>
<input type="text" id="original" />원
</li>
<li>
<label for="rate">할인율:</label>
<input type="text" id="rate" />%
</li>
</ul>
<button type="button" id="rate-btn">할인가격 계산하기</button>
<div class="show-result"></div>
</section>
.java2 {
border: 1px solid #000;
width: 500px;
margin: 0 auto;
text-align: center;
color: #111;
font-size: 1.6rem;
img {
width: 100%;
height: auto;
}
input[type="text"] {
border-bottom: 1px solid #000;
font-size: 1.6rem;
}
button {
background-color: #111;
color: #fff;
padding: 1rem;
margin-top: 10px;
}
}
const rateBtn = document.getElementById("#rate-btn");
const showPrice = () => {
//사용자가 입력한 값을 두개의 변수에 저장함
let original = document.querySelector("#original").value;
let rate = document.querySelector("#rate").value;
if (original > 0 && rate > 0) {
let savedPrice = original * (rate / 100);
let resultPrice = original - savedPrice;
}
document.querySelector(".show-result").innerHTML =
"상품의 원래 가격은" +
original +
"원이고, 할인율은" +
rate +
"%입니다." +
savedPrice +
"원을 할인받아" +
resultPrice +
"원에 구매하실 수 있습니다.";
};
rateBtn.addEventListener("click", showPrice);
퀴즈
JavaScript의 삼항 연산자나 구조 분해 할당 같은 새로운 문법들이 주로 어떤 목적을 위해 도입되었을까요?
코드 실행 성능 향상
데이터 타입의 다양화
조건문과 변수 할당 코드 간결화
클래스 상속 구조 개선
답변 1
0
잔재미코딩 DaveLee
지식공유자
안녕하세요. 우선 본 질문/답변은 평생 강의이기 때문에, 강의 영상 이해가 안되서, 다음 진도가 나갈 수 없는 경우에 대해, 답변을 드리는 것인데요. 이 부분 양해부탁드리고요. 강의 외적인 질문은 인프런에서도 관련 서비스를 제공하고 있어서, 질문을 올려보셔도 좋을 것 같습니다.
사실 보여주신 것도, 전체 웹페이지도 아니고, 무슨 동작이 안되신다는 것인지 조차 알수도 없기도 해서, 단번에 어떤 부분이 잘 못된듯 하다고 말씀드리기도 무리가 상당해보여서요. 이 부분 양해부탁드립니다.