Почему при умножении выводится NaN а не число?

Question

[Владимир Куликов]

<li class="cart-popup__item">
              <div class="cart-popup__delete"></div>
              <div class="cart-popup__tophalf">
                <div class="cart-popup__art">
                <img src="/upload/resize_cache/iblock/d3b/70_70_1/d3b3b55c23ed7aec658c3f928372955e.png" alt="" class="cart-popup__img">
                </div>
                <div class="cart-popup__name">
                <span>КУХОННАЯ МОЙКА POND БЕЛАЯ</span>
                </div>
              </div>
              <div class="cart-popup__bottomhalf">
                <div class="cart-popup__botitem">
                <div class="cart-popup__bottitle">
                  <span>Цена</span>
                </div>
                <div class="cart-popup__nums cart-popup__nums_one">
                  <span>12 100 руб.</span>
                </div>
                </div>
                <div class="cart-popup__botitem">
                <div class="cart-popup__bottitle">
                  <span>Количество</span>
                </div>

                <div class="cart-popup__quant-calc">
                  <div class="cart-popup__calcbtn cart-popup__calcbtn_min">
                  <!--<span>-</span>--><span>-</span>
                  </div>
                  <div class="cart-popup__calcdisp">
                  <span>3</span>
                  </div>
                  <div class="cart-popup__calcbtn cart-popup__calcbtn_plus">
                  <!--<span>+</span>--><span>+</span>
                  </div>
                </div>
                </div>
                <div class="cart-popup__botitem">
                <div class="cart-popup__bottitle">
                  <span>Всего</span>
                </div>
                <div class="cart-popup__nums cart-popup__nums_fin">
                  <span>36 300 руб.</span>
                  <!--<span></span>-->
                </div>
                </div>
              </div>
            </li>

PriceCalc(){
      $('.cart-popup__item').each(function(i, el){
        let calcItem = {
          calc: $(el).find('.cart-popup__quant-calc'),
          total: $(el).find('.cart-popup__nums_fin'),
          display: $(el).find('.cart-popup__calcdisp'),
          quant: Number($(el).find('.cart-popup__calcdisp').find('span').text()),
          btns: $(el).find('.cart-popup__calcbtn'),
          price: this.priceToNum,

          priceToNum(){

            let priceOfOne = $(el).find('.cart-popup__nums_one').find('span').text(),
                num = priceOfOne.indexOf('руб'),
                result = priceOfOne.slice(0, num)

            
            this.price = Number(result)

          },

          totalPrice(){
            let result = Number(this.price) * Number(this.quant);
            this.total.find('span').text(`${result} руб`);
          },

          ActualCalc(e){
            if($(e.target).closest('.cart-popup__calcbtn').hasClass('cart-popup__calcbtn_min')){
              if(this.quant > 1){
                this.quant -= 1
                $(el).find('.cart-popup__calcdisp').find('span').text(this.quant)
                this.totalPrice()
              } else {
                return
              }
            } else {
              this.quant += 1
              this.totalPrice()
              $(el).find('.cart-popup__calcdisp').find('span').text(this.quant)
            }
          },

          Init(){
            this.priceToNum()
            this.btns.bind('click', function(e){
              calcItem.ActualCalc(e)
            })
          }


        }
        calcItem.Init()
      })

    }

Есть инпут, в нем количество товаров.
По бокам кнопки, + -.
При клике, количество должно умножаться на цену. Цена: 6000руб.

Но почему то при клике на + или -, за место цены, появляется NaN руб :/

Comments

[BATPYIIIKOB]

Дружище!!! Есть такой инструмент хром_бравзере, называется Chrome DevTools. Там реально можно делать трассировку ;). Пользуйся, не стесняйся.

Answer 1

[Сергей c0re]

не известно что и как вы вводите, какие исходные цифры??
но режим Ванги подсказывает, каждое значение приводящееся к числу обработать строковыми функциями замены, заменить пробелы на пустую строку и , на .
и цену приводить к нижнему регистру, вдруг там Руб или РУБ ??

как-то так.

quant: Number($(el).find('.cart-popup__calcdisp').find('span').text().replace(/[\s\n\t]/mg, "").replace(/,/mg, ".")),

            let priceOfOne = $(el).find('.cart-popup__nums_one').find('span').text().replace(/[\s\n\t]/mg, "").replace(/,/mg, "."),
                num = priceOfOne.toLowerCase().indexOf('руб'),

PS: у вас Number() не может переварить 12 100
поэтому необходимо удалить все пробелы!
см. https://www.w3schools.com/jsref/tryit.asp?filename...
пример с Number(x5) = NaN

PPS: используйте console.log() и поэтапно выводите значения переменных, так и увидите в каком месте затык происходит. потом просто везде удалите эти уже ненужные выводы в консоль.

Comments

[Владимир Куликов]

К сожалению не подошло.(
Это товар в корзине.

<li class="cart-popup__item">
							<div class="cart-popup__delete"></div>
							<div class="cart-popup__tophalf">
							  <div class="cart-popup__art">
								<img src="/upload/resize_cache/iblock/d3b/70_70_1/d3b3b55c23ed7aec658c3f928372955e.png" alt="" class="cart-popup__img">
							  </div>
							  <div class="cart-popup__name">
								<span>КУХОННАЯ МОЙКА POND БЕЛАЯ</span>
							  </div>
							</div>
							<div class="cart-popup__bottomhalf">
							  <div class="cart-popup__botitem">
								<div class="cart-popup__bottitle">
								  <span>Цена</span>
								</div>
								<div class="cart-popup__nums cart-popup__nums_one">
								  <span>12 100 руб.</span>
								</div>
							  </div>
							  <div class="cart-popup__botitem">
								<div class="cart-popup__bottitle">
								  <span>Количество</span>
								</div>

								<div class="cart-popup__quant-calc">
								  <div class="cart-popup__calcbtn cart-popup__calcbtn_min">
									<!--<span>-</span>--><span>-</span>
								  </div>
								  <div class="cart-popup__calcdisp">
									<span>3</span>
								  </div>
								  <div class="cart-popup__calcbtn cart-popup__calcbtn_plus">
									<!--<span>+</span>--><span>+</span>
								  </div>
								</div>
							  </div>
							  <div class="cart-popup__botitem">
								<div class="cart-popup__bottitle">
								  <span>Всего</span>
								</div>
								<div class="cart-popup__nums cart-popup__nums_fin">
								  <span>36 300 руб.</span>
									<!--<span></span>-->
								</div>
							  </div>
							</div>
						</li>

[Сергей c0re]

Валерий Иванов, на https://jsfiddle.net/ пожалуйста.
больше не могу ванговать ))

[Сергей c0re]

Валерий Иванов, не ожидал такой подставы от .replace он только первое вхождение заменяет.
тогда надо так
str.replace(/[\s\n\t]/mg, "").replace(/,/mg, ".")

[Сергей c0re]

Валерий Иванов, обновил ответ.

[Владимир Куликов]

Спасибо большое, ваши навыки ванги не оценимы))

Answer 2

[Ice]

Цикл порождающий объект с функциями внутри, под каждый элемент. серьезно? (представьте у вас 500 разных товаров, под каждый вы создаете отдельное объект.. и еще гвоздем прибиваем bind)
Сделайте нормальный один метод для всех объектов.
Зачем что-то резать, сделайте просто parseInt(el.match(/\d+/)) (останутся только цифры), работайте с ними
Последовательные find ненужны, нормально работает .find('.cart-popup__nums_one span')

Comments

[Сергей c0re]

вообще можно без объектов и гораздо проще.
объект уже есть - DOM дерево.

Answer 3

[Евгений Кылин]

parseFloat(Value)
вместо Number()