kdy931023394

<p>&nbsp;</p>
<div style="box-sizing: border-box; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="background-color: #000000;"><span style="box-sizing: border-box; font-weight: inherit; font-style: inherit; color: #569cd6;">const</span> <span style="box-sizing: border-box; font-weight: inherit; font-style: inherit; color: #4fc1ff;">rateBtn</span> = <span style="box-sizing: border-box; font-weight: inherit; font-style: inherit; color: #9cdcfe;">document</span>.<span style="box-sizing: border-box; font-weight: inherit; font-style: inherit; color: #dcdcaa;">getElementById</span>(<span style="box-sizing: border-box; font-weight: inherit; font-style: inherit; color: #ce9178;">"#rate-btn"</span>);</span></div>
<div style="box-sizing: border-box; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; padding-left: 40px;">&nbsp;</div>
<div style="box-sizing: border-box; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="color: #000000;">getElementById를 쓰셨기 때문에 </span></div>
<div style="box-sizing: border-box; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="color: #000000;">뒤쪽 소괄호 안에는 #를 빼고 rate-btn만 작성해주셔야 선택이 제대로 됩니다.</span></div>
<div style="box-sizing: border-box; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="color: #000000;">위에 말씀 해주신 것처럼 onclick 사용시 해당 선언이 불필요하여 오류가 나지 않지만,</span></div>
<div style="box-sizing: border-box; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="color: #000000;">rateBtn 을 사용하실거면 그렇게 작성하시면 좋을 것 같습니다.</span></div>
<div style="box-sizing: border-box; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">위처럼 작성 후 console에 rateBtn 찍으시면 null로 나와요!</div>
<div style="box-sizing: border-box; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">#rate-btn을 작성하실거라면 querySelector를 작성하는 방법도 있습니다.</div>
<div style="box-sizing: border-box; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">&nbsp;</div>
<div style="box-sizing: border-box; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">onclick 사용 없이 코드를 작성해봤습니다.</div>
<div style="box-sizing: border-box; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">&nbsp;</div>
<div style="box-sizing: border-box; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: D2Coding, Consolas, 'Courier New', monospace, Consolas, 'Courier New', monospace; line-height: 19px;">
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></div>
<div>&nbsp; <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">rateBtn</span> = <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"rate-btn"</span>);</div>
<div>&nbsp;</div>
<div>&nbsp; <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">showPrice</span> = () <span style="color: #569cd6;">=></span> {</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; <span style="color: #6a9955;">//사용자가 입력한 값을 두개의 변수에 저장함</span></div>
<div>&nbsp; &nbsp;</div>
<div>&nbsp; &nbsp; <span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">original</span> = <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelector</span>(<span style="color: #ce9178;">"#original"</span>).<span style="color: #9cdcfe;">value</span>;</div>
<div>&nbsp; &nbsp; <span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">rate</span> = <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelector</span>(<span style="color: #ce9178;">"#rate"</span>).<span style="color: #9cdcfe;">value</span>;</div>
<div>&nbsp; &nbsp;</div>
<div>&nbsp; &nbsp; <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">original</span> > <span style="color: #b5cea8;">0</span> && <span style="color: #9cdcfe;">rate</span> > <span style="color: #b5cea8;">0</span>) {</div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #569cd6;">var</span> <span style="color: #9cdcfe;">savedPrice</span> = <span style="color: #9cdcfe;">original</span> * (<span style="color: #9cdcfe;">rate</span> / <span style="color: #b5cea8;">100</span>);</div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #569cd6;">var</span> <span style="color: #9cdcfe;">resultPrice</span> = <span style="color: #9cdcfe;">original</span> - <span style="color: #9cdcfe;">savedPrice</span>;</div>
<div>&nbsp; &nbsp; }</div>
<div>&nbsp; &nbsp;</div>
<div>&nbsp; &nbsp; <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelector</span>(<span style="color: #ce9178;">".show-result"</span>).<span style="color: #9cdcfe;">innerHTML</span> =</div>
<div>&nbsp; &nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #ce9178;">"상품의 원래 가격은"</span> + <span style="color: #9cdcfe;">original</span> + <span style="color: #ce9178;">"원이고, 할인율은"</span> + <span style="color: #9cdcfe;">rate</span> +</div>
<div>&nbsp; &nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #ce9178;">"%입니다."</span> + <span style="color: #9cdcfe;">savedPrice</span> + <span style="color: #ce9178;">"원을 할인받아"</span> + <span style="color: #9cdcfe;">resultPrice</span> + <span style="color: #ce9178;">"원에 구매하실 수 있습니다."</span>;</div>
<div>&nbsp;</div>
<div>&nbsp; }; &nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp; <span style="color: #4fc1ff;">rateBtn</span>.<span style="color: #dcdcaa;">addEventListener</span>(<span style="color: #ce9178;">"click"</span>, <span style="color: #dcdcaa;">showPrice</span>)</div>
<br />
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></div>
</div>
</div>
<div style="box-sizing: border-box; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">&nbsp;</div>
<div style="box-sizing: border-box; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="color: #000000;">저도 같은 학생이라 도움 되셨길 바라요!</span></div>

kdy931023394

Posts