왜 결과값이 안나오는지 알수 있을까요? let대신 var를 써도 안나오네요ㅜㅜ

Question

< section class = "java2" > < img src = "img/3.png" alt = "" /> < ul > < li > < label for = "original" > 원가: < input type = "text" id = "original" /> 원 < li > < label for = "rate" > 할인율: < input type = "text" id = "rate" /> % < button type = "button" id = "rate-btn" > 할인가격 계산하기 < div class = "show-result" > .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 );

영영 · Answer

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 ) 저도 같은 학생이라 도움 되셨길 바라요!

qls2033 · Answer

addEventListener을 쓰셔도 됩니다. addEventListener을 쓰면 onclick를 html에 안 쓰셔도 됩니다. 우주열차님이 답변주신 것처럼 호이스팅을 공부해보시면 var는 호이스팅이 되서 강사님께서 var를 쓰신 것 같습니다. let을 쓰고 싶으시다면 let을 함수 바깥에다가 선언을 하시면 될 것 같습니다. 저도 수강하는 사람이라 도움이 되셨으면 좋겠습니다

우주열차 · Answer

< section class = "java2" > < img src = "resource/sale.png" alt = "" /> < ul > < li > < label for = "original" > 원가: < input type = "text" id = "original" /> 원 < li > < label for = "rate" > 할인율: < input type = "text" id = "rate" /> % < button type = "button" id = "rate-btn" onclick = " showPrice () " > 할인가격 계산하기 < div class = "show-result" > < 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 + "원에 구매하실 수 있습니다." ; }; if 문안에 let이 아닌 var로 해주셔야 됩니다. 이유는 자바스크립트 호이스팅 을 한번 공부해보시길 추천드립니다. https://velog.io/@yejineee/ES6%EC%9D%98-let-const