[英]JavaScript: how to sum values of variables and display as div?
I am new user at JS and I am trying to sum 2 values from HTML input. 我是JS的新用户,我想对HTML输入中的2个值求和。
The problem: I have 3 HTML input's: 问题:我有3个HTML输入:
type=number
(select number from input field); type=number
输入(从输入字段中选择数字); type=radio
type=radio
输入 I want to sum the value of the number
field with value of the selected radio
button in real time (using jQuery). 我想实时将
number
字段的值与所选radio
按钮的值相加(使用jQuery)。
JS: JS:
$('#quantity').click(function () {
$('#sum').text($(this).val());
});
$('#y').click(function () {
var y = document.querySelector('#y').value;
$('#sum').text($(this).val()).y;
});
$('#x').click(function () {
var x = document.querySelector('#x').value;
$('#sum').text($(this).val()).x;
});
HTML: HTML:
<form>
<input id="quantity" type="number">
<input id="y" name="math" type="radio" value="0">
<input id="x" name="math" type="radio" value="1">
</form>
<span id="sum"></span>
I just want to add the value of the selected radio
input to the value in the "quantity" field. 我只想将所选
radio
输入的值添加到“数量”字段中的值。
Example: If the value of the "quantity" field is "100" and I click on the "x" radio button (value = 1), then print "101". 示例:如果“数量”字段的值为“ 100”,并且我单击“ x”单选按钮(值= 1),则打印“ 101”。
Add an id
to your form (I used myForm
here for example) and then try something along these lines: 在您的表单中添加一个
id
(例如,我在这里使用了myForm
),然后尝试按照以下方式进行操作:
$('#myForm input').change(function() {
var quantityVal = +$('#quantity').val();
var radioVal = +$('[name="math"]:checked').val();
var sum = quantityVal + radioVal;
$('#sum').text(sum)
});
Here we're adding a change listener to all the inputs in the form, so that if any of them change in any way (not click like you had) the function will run. 在这里,我们向表单中的所有输入添加了一个更改侦听器,这样,如果其中任何一个以任何方式更改(而不是像您所单击的那样),该函数就会运行。 We then use jQuery to grab the value from the quantity input as well as the radio which is
checked
. 然后,我们使用jQuery从输入的数量以及已
checked
的单选中获取值。 You'll notice we also use unary + for both to make sure they are cast to integers. 您会注意到我们也对它们都使用一元+来确保将它们强制转换为整数。
Finally we just set the value of the sum
span. 最后,我们只设置
sum
跨度的值。 The above should get you most of the way there, though you should probably add some error checking for empty radio values (or set a default one). 尽管应该为空单选值添加一些错误检查(或设置一个默认值),但是上面的内容应该带给您大部分的知识。
How about this? 这个怎么样?
// Any time this is edited, update $('#quantity').on("input", function() { $('#sum').text(sumThem() ); }); // ANY radio button with the name math // gets clicked, we do this ONE function. $('[name=math]').click(function() { $('#sum').text(sumThem() ); }); function sumThem(){ var qty = parseInt($("#quantity").val()) || 0; var addend = parseInt($("[name=math]:checked").val()) || 0; return qty + addend; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input id="quantity" type="number"> <input id="y" name="math" type="radio" value="0"> <input id="x" name="math" type="radio" value="1"> </form> <span id="sum"></span>
There were a couple small problems: First, when the text input was updated, it wasn't adding in the radio button. 有两个小问题:首先,在更新文本输入时,未在单选按钮中添加它。 Second, if no radio button was clicked, it was giving a NaN issue.
其次,如果未单击任何单选按钮,则表示出现NaN问题。 Now, when you input on the text, if there's no radio clicked, the value is set to 0.
现在,当您输入文本时,如果没有单击任何单选,则该值将设置为0。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.