Добавляйте значение Y к значению X при каждом нажатии кнопки

Question

Я мог бы пропустить слона в комнате здесь, но я не могу понять это.

Что я хочу сделать, добавлять сумму Y к переменной X при каждом нажатии кнопки. Y передается через функцию onClick.

addStat: function(button, amount, price) {
    var curPrice = price;
    var priceHtml = $(button).closest("tr").find('.price');

    curPrice += price;

    $(priceHtml).text(curPrice);

}, 

Это то, что у меня есть, но у меня есть ощущение, что мне нужно установить значение текущей цены, может быть, вне функции? Я пытался, но тогда он всегда будет сбрасываться при каждом нажатии кнопки.

Любая идея / предложение приветствуется. Я новичок в JS. Просто учусь.

Один метод, который я знаю, сработает, если я получу значение HTML-элемента цены. Но проблема в том, что его можно редактировать с помощью Chrome Inspect.

Answer 1

Вы должны установить let curPrice = 0; вне функции, поверх вашего кода. Тогда вы можете просто использовать curPrice += parseFloat(price); внутри функции. Это предотвращает неправильное перезапись значения curPrice.

РЕДАКТИРОВАТЬ -> Пример:

let curPrice = 0;

function updatePrice(button, amount, price) {
    if(!isNaN(price)) {
      curPrice += price;
      return $(button).find('.price').text(curPrice.toFixed(2));
    }
    return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="updatePrice(this, 10.00, 10.00)">
  <span class="price">0.00</span>
</button>

<button onclick="updatePrice(this, 10.00, 'isNaN')">
  <span class="price">Not working!</span>
</button>

И используйте let variable; вместо var variable;

Другой пример:

function updatePrice(button, amount, price) {
  //Find the .price inside the clicked button
  let $price = $(button).find('.price');
  //Test if price is numeric
  if(!isNaN(price)) {
    //If is numeric retrive the current price and add the price
    let newPrice = parseFloat($price.text()) + parseFloat(price);
    //Return the new price and print it on .price inside the button
    return $price.text(newPrice.toFixed(2)); // .toFixed(2) return 2 decimal.
  }
  //If price is not numeric return false
  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- price is numeric so it works -->
<button onclick="updatePrice(this, 10.00, 10.00)">
  <span class="price">10.00</span>
</button>
<!-- price is not numeric so the function return false -->
<button onclick="updatePrice(this, 10.00, 'not numeric')">
  <span class="price">10.00 (not working)</span>
</button>

Удачи!

Answer 2

Я пытался свести то, что вы пытаетесь сделать, к минимальному примеру. На ваш вопрос звучит так, будто вы пытаетесь сделать четыре вещи одним кликом:

• принять текстовое значение элемента
• приведите это значение к числу
• удвоить число
• записать новое значение в элемент

Вам не нужно перемещать curPrice переменную за пределы функции. Неважно, что вы повторно определяете его при каждом клике, потому что вы сразу удваиваете его для себя. И вы захотите проанализировать входящий текст на число с parseInt, иначе javascript будет предполагать, что вы пытаетесь выполнить конкатенацию строк:

function addStat(event) {
    var curPrice = parseInt(event.target.textContent, 10);

    curPrice += curPrice;

    $(event.target).text(curPrice);
}

$('.price').click(addStat)

.price {
  background-color: #ace;
  height: 25px;
  margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="price">1</div>
<div class="price">3</div>

Answer 3

Вам просто нужно получить текущее значение цены с помощью priceHtml.text() и присвоить его переменной curPrice.

Попробуйте это:

var priceHtml = $(button).closest("tr").find('.price');
var curPrice = parseFloat(priceHtml.text())||0;

curPrice += price;

priceHtml.text(curPrice);