Не считается сумма количество товаров

Question

При вводе количества товаров в поле input у меня должна считаться сумма товара, но в место суммы выводится NaN. Когда ставлю обычное число без руб. то сумма считается. Как решить эту проблему?

    <td>
            <?foreach($arResult["PRICES"] as $code=>$arPrice):?>
            <?if($arPrice = $arElement["PRICES"][$code]):?>
                <?if($arPrice["DISCOUNT_VALUE"] < $arPrice["VALUE"]):?>
                    <s><?=$arPrice["PRINT_VALUE"]?></s><br /><span  id="price" class="catalog-price"><?=$arPrice["PRINT_DISCOUNT_VALUE"]?></span>
                <?else:?>
                    <span  id="price" class="catalog-price"><?=$arPrice["PRINT_VALUE"]?></span>
                    <?//var_dump($arPrice["PRINT_VALUE"]);?>

                <?endif?>
            <?else:?>
                &nbsp;
            <?endif;?>
            
<?endforeach;?>
        </td>
        <td class="quantity-container">
            <div class="amount-wwapper">
                <input class="quantity<?=$arElement['ID']?>" id="numericUpDown" type="number" value="1">
                <div class="">
                    <input id="up" type="button" class="inc-btn input-btn">
                    <input id="down" type="button" class="dec-btn input-btn">
                </div>
            </div>
        </td>
        <td>
            <div id="sum">
                1
            </div>
        </td>
    <script>
        let price = document.getElementById("price");
        let sum = document.getElementById("sum");
        let numericUpDown = document.getElementById("numericUpDown");
        let up = document.getElementById("up");
        let down = document.getElementById("down");
        up.onclick = () => {
            numericUpDown.value = (isNaN(numericUpDown.value)) ? 1 : +numericUpDown.value + 1;
            setSum();
        };
        down.onclick = () =>{
            numericUpDown.value = (numericUpDown.value) > 0 ? +numericUpDown.value - 1 : 0;
            setSum();
        }

        numericUpDown.oninput = setSum;

        function setSum() {
            sum.innerText = (price.innerText * numericUpDown.value)

        }
    </script>

Answer 1

let buttonsUp = document.querySelectorAll(".up");
let buttonsDown = document.querySelectorAll(".down");

buttonsUp.forEach(btn => {
  btn.addEventListener('click', function() {
    changeAmount(this, true);
  });
})

buttonsDown.forEach(btn => {
  btn.addEventListener('click', function() {
    changeAmount(this, false);
  });
})

function changeAmount(targetElement, isUp){
    let priceDOMElement = targetElement.closest('.item-row').querySelector('.catalog-price');
    let sumDOMElement = targetElement.closest('.item-row').querySelector('.sum');
    let amountDOMElement = targetElement.closest('.item-row').querySelector('.quantity-container input.amount-value');
    
    amountDOMElement.value = isUp ? +amountDOMElement.value + 1 : +amountDOMElement.value - 1;
    
    let price = +priceDOMElement.innerHTML;
    let newAmount = +amountDOMElement.value
   
    
    sumDOMElement.innerHTML = price * newAmount;
}

<table>
  <thead>
    <tr>
      <th>Цена</th>
      <th>Кол-во</th>
      <th>Сумма</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr class="item-row">
      <td>
        <span class="catalog-price">200</span>
      </td>
      <td class="quantity-container">
        <div class="amount-wrapper">
          <input class="amount-value" id="numericUpDown" type="number" value="1">
          <div class="">
            <input type="button" class="up inc-btn input-btn" value="+">
            <input type="button" class="down dec-btn input-btn" value="-">
          </div>
        </div>
      </td>
      <td>
        <div class="sum">
          1
        </div>
      </td>
      <td><button>В корзину</button></td>
    </tr>
    <tr class="item-row">
      <td>
        <span class="catalog-price">300</span>
      </td>
      <td class="quantity-container">
        <div class="amount-wrapper">
          <input class="amount-value" id="numericUpDown" type="number" value="1">
          <div class="change-amunt-btn-container">
            <input type="button" class="up inc-btn input-btn" value="+">
            <input type="button" class="down dec-btn input-btn" value="-">
          </div>
        </div>
      </td>
      <td>
        <div class="sum">
          1
        </div>
      </td>
      <td><button>В корзину</button></td>
    </tr>
  </tbody>
</table>

БЛОГ НА HUSL

Не считается сумма количество товаров

Ответы (1 шт):