JavaScript：如何对变量的值求和并显示为 div？

Question

我是 JS 的新用户，我正在尝试对 HTML 输入中的 2 个值求和。

问题： 我有 3 个 HTML 输入：

• 由type=number输入（从输入字段中选择数字）；
• 2 个输入，type=radio

我想实时将number 字段的值与所选radio 按钮的值相加（使用jQuery）。

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：

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

我只想将所选radio 输入的值添加到“数量”字段中的值。

示例：如果“数量”字段的值为“100”并且我单击“x”单选按钮（值 = 1），则打印“101”。

Answer 1

在您的表单中添加一个id（例如，我在这里使用了myForm），然后尝试以下方式：

$('#myForm input').change(function() {
  var quantityVal = +$('#quantity').val();
  var radioVal = +$('[name="math"]:checked').val();
  var sum = quantityVal + radioVal;
  $('#sum').text(sum)
});

在这里，我们为表单中的所有输入添加了一个更改侦听器，这样如果其中任何一个以任何方式发生更改（不是像您之前那样单击），该函数就会运行。然后我们使用 jQuery 从输入的数量以及 checked 的无线电中获取值。您会注意到我们还使用unary + 来确保它们都被转换为整数。

最后我们只设置了sum span 的值。以上内容应该可以帮助您完成大部分工作，尽管您可能应该为空单选值添加一些错误检查（或设置一个默认值）。

Live example here

Answer 2

这个怎么样？

// 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>

有几个小问题：首先，当文本输入更新时，它没有添加到单选按钮中。其次，如果没有单击单选按钮，则会出现 NaN 问题。现在，当您输入文本时，如果没有单击单选，则该值设置为 0。