在 JS/jQuery 中将一个变量加(或乘、减或除)另一个变量
Add (or multiply, subtract or divide) one var to another in JS/jQuery
如果有人在其他地方提出并回答了这个问题,我深表歉意,我一直在努力寻找准确的搜索词。
在 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
在尝试添加之前也是如此。
想法?
你只需要在第一次定义变量时使用var
。看起来您正在尝试访问一个已经存在的变量。示例:
var total = 0;
var rocketspend = 10;
total = total + rocketspend;
$(".totalamount").html(total);
此外,请尝试检查您的控制台是否有任何错误。在大多数浏览器中,您可以右键单击并检查一个元素或单击 Ctrl + Shift + I 和单击控制台选项卡。您可以在 Firefox 中使用 Ctrl + Shift + K。
您正在使用 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> +
<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> +
<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>
如果有人在其他地方提出并回答了这个问题,我深表歉意,我一直在努力寻找准确的搜索词。
在 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
在尝试添加之前也是如此。
想法?
你只需要在第一次定义变量时使用var
。看起来您正在尝试访问一个已经存在的变量。示例:
var total = 0;
var rocketspend = 10;
total = total + rocketspend;
$(".totalamount").html(total);
此外,请尝试检查您的控制台是否有任何错误。在大多数浏览器中,您可以右键单击并检查一个元素或单击 Ctrl + Shift + I 和单击控制台选项卡。您可以在 Firefox 中使用 Ctrl + Shift + K。
您正在使用 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> +
<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> +
<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>