乘兩個輸入值並顯示答案使用jQuery

Question

試圖從文本框兩個輸入值頁上的段落，點擊一個按鈕，然後返回答案爲文本

兩個輸入名稱爲「重量」和「代表」。我想它，一旦你點擊的按鈕，它會做的計算和被添加到格「結果」

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