JSFiddle - React, Tailwind, and code Playground

by this_mong

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<form name="orderform" id="orderform" method="post" class="orderform" action="/Order">
  <div class="num">
    <div class="updown">
      <span><i class="fas fa-arrow-alt-circle-up up"></i></span>
      <input type="text" name="p_num1" id="p_num1" size="1" maxlength="4" class="p_num" value="1" disabled>
      <span><i class="fas fa-arrow-alt-circle-down down"></i></span>
    </div>
  </div>
  <div class="num">
    <div class="updown">
      <input type="text" name="p_num2" id="p_num2" size="1" maxlength="4" class="p_num" value="2" disabled>
      <span><i class="fas fa-arrow-alt-circle-up up"></i></span>
      <span><i class="fas fa-arrow-alt-circle-down down"></i></span>
    </div>
  </div>
</form>
<!--https://blogpack.tistory.com/704 -->

CSS

.wrap{

    max-width: 480px;

    margin: 0 auto; /* 화면 가운데로 */

    background-color: #fff;

    height: 100%;

    padding: 20px;

    box-sizing: border-box;



}

.reviewform textarea{

    width: 100%;

    padding: 10px;

    box-sizing: border-box;

}

.rating .rate_radio {

    position: relative;

    display: inline-block;

    z-index: 20;

    opacity: 0.001;

    width: 60px;

    height: 60px;

    background-color: #fff;

    cursor: pointer;

    vertical-align: top;

    display: none;

}

.rating .rate_radio + label {

    position: relative;

    display: inline-block;

    margin-left: -4px;

    z-index: 10;

    width: 60px;

    height: 60px;

    background-image: url('./img/starrate.png');

    background-repeat: no-repeat;

    background-size: 60px 60px;

    cursor: pointer;

    background-color: #f0f0f0;

}

.rating .rate_radio:checked + label {

    background-color: #ff8;

}



.cmd{

    margin-top: 20px;

    text-align: right;

}

.cmd input[type="button"]{

    padding: 10px 20px;

    border: 1px solid #e8e8e8;

    background-color: #fff;

    background-color:#000;  

    color: #fff;

}



.warning_msg {

    display: none;

    position: relative;

    text-align: center;

    background: #ffffff;

    line-height: 26px;

    width: 100%;

    color: red;

    padding: 10px;

    box-sizing: border-box;

    border: 1px solid #e0e0e0;

}
input[type="text"]{
  border:0px;
  background-color:#fff;
}

JavaScript

document.querySelectorAll('.updown').forEach(
        function(item, idx){
            //수량 입력 필드 값 변경
            item.querySelector('.p_num').addEventListener('keyup',function(){
                basket.changePNum(idx+1);
            });
            //수량 증가 화살표 클릭
            item.children[0].addEventListener('click', function(){
                basket.changePNum(idx+1);
            });
            //수량 감소 화살표 클릭
            item.children[2].addEventListener('click', function(){
                basket.changePNum(idx+1);
            });
        }
);
    
let basket = {
    totalCount: 0, //전체 갯수 변수
    //화면 업데이트
    updateUI: function () {
        document.querySelector('#sum_p_num').textContent = '상품갯수: ' + this.totalCount.formatNumber() + '개';
        document.querySelector('#sum_p_price').textContent = '합계금액: ' + this.totalPrice.formatNumber() + '원';

    },

    //개별 수량 변경

    changePNum: function (pos) {
        var item = document.querySelector('input[name=p_num'+pos+']');
        var p_num = parseInt(item.getAttribute('value'));
        var newval = event.target.classList.contains('up') ? p_num+1 : event.target.classList.contains('down') ? 
p_num-1 : event.target.value;

        if (parseInt(newval) < 1 || parseInt(newval) > 99) { return false; }



        item.setAttribute('value', newval);

        item.value = newval;



        var price = item.parentElement.parentElement.previousElementSibling.firstElementChild.getAttribute('value');

        item.parentElement.parentElement.nextElementSibling.textContent = (newval * price).formatNumber()+"원";

    },

    

}