在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，以神秘结束。或者它可能完全是另一回事。 rocketspend var可以自行运行，在尝试添加之前total也是如此。

思想？

Answer 1

首次定义变量时，只需使用var。看起来您正在尝试访问已存在的变量。例如：

var total = 0;
var rocketspend = 10;

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

此外，请尝试检查控制台是否有任何错误。在大多数浏览器中，您可以右键单击并检查元素，或单击 Ctrl + Shift + I 并单击“控制台”选项卡。您可以在Firefox中使用 Ctrl + Shift + K 。

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）。

段

$('#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>