자바스크립트를 사용하여 옵션에 있는 값을 선택할때마다 해당하는 값을 더하는 방법은? 아래에서 알아봅니다. 먼저 html을 사용하여 입력폼을 만들어봅니다. 사용자가 select의 옵션을 선택할 수 있으며 더해진 값은 하단의 input 태그에 합산되어 나타납니다.




! html 코드 보기
<body>
  <h4># Select your favorite item(s)</h4>
  <select onchange="sumPrice(event)">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
  </select>

  <input id="totalCount" value="0" />
</body>
만약 select가 선택되었는지 그리고 값이 변경되었는지는 자바스크립트의 onchange를 사용하여 이벤트를 실행하도록 하였습니다. 그럼 아래는 스크립트 코드입니다. 여기서는 선택된 값을 기존의 전체값과 더해서 보여주는 부분이 수행됩니다.

test = {
  totalValue: 0,

  // Sum and show total price
  sumPrice: function() {
    var selectedPrice = ~~event.target.value;
    this.totalValue = this.totalValue + selectedPrice;
    formEle = document.querySelector('#totalCount');
    formEle.value = this.totalValue;
  }
};

이제 옵션값을 선택할때마다 값이 추가되어 합산된 값이 input태그에 나타나게됩니다. 간단한 예제입니다.


# 예제코드 직접 해보기

아래에서 직접 선택해보세요. 위 코드를 실행한 모습입니다.