인프런 커뮤니티 질문&답변

 <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);