Добавить (или умножить, вычесть или разделить) одну переменную к другой в JS/jQuery

Question

Принося искренние извинения, если об этом спрашивали и отвечали в другом месте, я изо всех сил пытался найти для этого точные условия поиска.

Работая в JQuery у меня есть var называется total, Мне нужно добавить значение других vars в total, Все vars в вопросе есть числовые значения.

Вот что я попробовал:

var total = total+rocketspend;
$(".totalamount").html(total);

а также

var newtotal = total+rocketspend;
var total = newtotal;
$(".totalamount").html(total);

Оба привели в .totalamount быть опустошенным и замененным ничем. У меня есть теории о том, почему это может пойти не так - возможно, что в первом примере var не допускается самоопределение, и во втором примере браузер пытается определить оба newtotal а также total в то же время заканчивается тайной. Или это может быть что-то совсем другое. rocketspendvar отлично работает самостоятельно, как и total до попытки добавления.

Мысли?

Answer 1

Вам нужно только использовать var когда вы впервые определяете переменную. Похоже, вы пытаетесь получить доступ к переменной, которая уже существует. Пример:

var total = 0;
var rocketspend = 10;

total = total + rocketspend;
$(".totalamount").html(total);

Кроме того, попробуйте проверить консоль на наличие ошибок. В большинстве браузеров вы можете щелкнуть правой кнопкой мыши и осмотреть элемент или нажать Ctrl + Shift + I и щелкнуть на вкладке Консоль. Вы можете использовать Ctrl + Shift + K в Firefox.

Answer 2

Вы используете jQuery и ссылаетесь на элемент (т.е. .totalamount) при условии, что вы используете обычную веб-страницу (например, HTML, CSS, JS/jQ и т. д.), этот фрагмент имеет 2 <forms>, Первый использует только JavaScript и HTML5. Вторая форма использует jQuery и HTML5.

При использовании полей формы, таких как <input> значение, введенное в них, будет строковым (т. е. текстовым). Поэтому, когда набрано "3", <input> будет воспринимать это как текст, а не как вещественное число. Так что конвертируйте строку в число, используйте parseFloat(), parseInt(), или же Number(),

Получить <input> значения используют .val() (jQuery) или .value (JavaScript).

SNIPPET

$('#calc1').on('input', function() {
  var rocket1 = $('#rocket1').val();
  var sub1 = $('#sub1').val();
  var total1 = parseFloat(sub1) + parseFloat(rocket1);
  $("#total1").val(total1);
});

input {width: 8ex;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Using only plain JavaScript and HTML5 form fields</p>
<form id="calc" name="calc" oninput="total.value = parseFloat(sub.value, 10) + parseFloat(rocket.value, 10)">
  <fieldset>
    <legend>Rocket Expenditure</legend>
    <label for="sub">
      <b>Sub Total:</b>
      <input type="number" id="sub" name="sub" value="0">
    </label>&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;
    <label for="rocket">
      <b>Rocket:</b>
      <input type="number" id="rocket" name="rocket" value="0">
    </label>
    <label>
      <b>Total:</b>
      <output name="total" for="sub rocket">0</output>
    </label>
  </fieldset>
</form>
<p>Using jQuery and HTML5 form fields</p>
<form id="calc1" name="calc1">
  <fieldset>
    <legend>Rocket Expenditure 1</legend>
    <label for="sub1">
      <b>Sub Total 1:</b>
      <input type="number" id="sub1" name="sub1" value="0">
    </label>&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;
    <label for="rocket1">
      <b>Rocket 1:</b>
      <input type="number" id="rocket1" name="rocket1" value="0">
    </label>
    <label>
      <b>Total 1:</b>
      <output id="total1" name="total1" for="sub1 rocket1">0</output>
    </label>
  </fieldset>
</form>