인프런 커뮤니티 질문&답변
작성한 질문수
왜 결과값이 안나오는지 알수 있을까요? let대신 var를 써도 안나오네요ㅜㅜ
작성
·
501
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);
답변 3
0
const rateBtn = document.getElementById("#rate-btn");
getElementById를 쓰셨기 때문에
뒤쪽 소괄호 안에는 #를 빼고 rate-btn만 작성해주셔야 선택이 제대로 됩니다.
위에 말씀 해주신 것처럼 onclick 사용시 해당 선언이 불필요하여 오류가 나지 않지만,
rateBtn 을 사용하실거면 그렇게 작성하시면 좋을 것 같습니다.
위처럼 작성 후 console에 rateBtn 찍으시면 null로 나와요!
#rate-btn을 작성하실거라면 querySelector를 작성하는 방법도 있습니다.
onclick 사용 없이 코드를 작성해봤습니다.
<script>
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) {
var savedPrice = original * (rate / 100);
var resultPrice = original - savedPrice;
}
document.querySelector(".show-result").innerHTML =
"상품의 원래 가격은" + original + "원이고, 할인율은" + rate +
"%입니다." + savedPrice + "원을 할인받아" + resultPrice + "원에 구매하실 수 있습니다.";
};
rateBtn.addEventListener("click", showPrice)
</script>
저도 같은 학생이라 도움 되셨길 바라요!
0
addEventListener을 쓰셔도 됩니다. addEventListener을 쓰면 onclick를 html에 안 쓰셔도 됩니다. 우주열차님이 답변주신 것처럼 호이스팅을 공부해보시면 var는 호이스팅이 되서 강사님께서 var를 쓰신 것 같습니다. let을 쓰고 싶으시다면 let을 함수 바깥에다가 선언을 하시면 될 것 같습니다. 저도 수강하는 사람이라 도움이 되셨으면 좋겠습니다
0
<section class="java2">
<img src="resource/sale.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" onclick="showPrice()">할인가격 계산하기</button>
<div class="show-result"></div>
</section>
<script>
먼저 버튼에 onclick="showPrice()" 함수가 빠졌구요
스크립트부분에는
<script>
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) {
var savedPrice = original * (rate / 100);
var resultPrice = original - savedPrice;
}
document.querySelector(".show-result").innerHTML =
"상품의 원래 가격은" +
original +
"원이고, 할인율은" +
rate +
"%입니다." +
savedPrice +
"원을 할인받아" +
resultPrice +
"원에 구매하실 수 있습니다.";
};
</script>
if 문안에 let이 아닌 var로 해주셔야 됩니다.
이유는 자바스크립트 호이스팅 을 한번 공부해보시길 추천드립니다.
https://velog.io/@yejineee/ES6%EC%9D%98-let-const
아 버튼에 showprice를 안넣었네요. 선생님 그런데 rateBtn.addEventListener("click", showPrice);
이렇게는 사용이 불가한건가요??????????