javascript - 使用 jQuery 将两个输入值相乘并在页面上将答案显示为段落

Question

尝试从文本框中获取两个输入值，单击一个按钮，然后以文本形式返回答案

两个输入名称是“weight”和“reps”。我想要它，所以一旦你点击按钮，它就会进行计算并添加到 div“result”

HTML:

<div>
  Weight lifted: <input name="weight" type="text" value="?">
</div>
<div>
  Reps attained: <input name="reps" type="text" value="?">
</div>
<button>Calculate One-Rep Max</button>

<div id="result"></div>

我现在拥有的 jquery:

$(document).ready(function() {
  $('button').click(function() {
    var weight = $('input[name=weight]').val();
    var reps = $('input[name=weight]').val();
    var max = $('input[name=weight]').val() * $('input[name=reps]').val() * 0.0333 +   $('input[name=weight]').val();
    $('#result').append("<p>" + max + "</p>");
  });
});

Answer 1

问题是 .val() 返回一个字符串，而 * 运算符隐式地将字符串转换为数字(例如 "5.0"* "5.0 " → 25)，+ 运算符不会。最后的 + 不是将两个数字相加，而是将它们连接成字符串(例如 "5.0"+ "5.0" → "5.05.0 ")。您需要首先解析输入，然后将结果作为数字进行处理。

试试这个:

var weight = Number($('input[name=weight]').val());
var reps = Number($('input[name=reps]').val());
var max = weight * reps * 0.0333 + weight ;
$('#result').append("<p>" + max + "</p>"); 
// or $('<p>').text(max).appendTo("#result");

Demonstration