輸入文本的JQuery值不能用作參數

Question

我正在使用javascript/jquery來計算一些簡單的公式。我通過創建對象然後使用HTML輸入元素的值作爲執行和返回答案所需的參數來完成此操作。

這裏的JavaScript（HTML和CSS在的jsfiddle鏈接這一問題的末尾提供）：

var recP = $("#recP"); 
var recA = $("#recA"); 
var ansr = $("#ansr"); 
var l = $("#l").val(); 
var w = $("#w").val(); 

//rectangle 
function Rectangle(length,width) { 
    this.length = length; 
    this.width = width; 

    this.calcPerim = function() { 
     return (this.length * 2) + (this.width * 2); 
    }; 
    this.calcArea = function() { 
     return this.length * this.width; 
    }; 
}; 

var rectangle = new Rectangle(l,w); // l and w are defined in the above variables 
var recPerim = rectangle.calcPerim(l,w); 
var recArea = rectangle.calcArea(l,w); 

recP.click(function() { 
    ansr.append("The perimeter is " + recPerim);  
}); 

recA.click(function() { 
    ansr.append("The area is " + recArea); 
}); 

如果我設置輸入元素的值，我得到預期的結果。例如：

<input type="text" id="l" value="3" /> 
<input type="text" id="w" value="4" /> 

將返回12的面積和14的周邊，但是當該值在輸入框中被改變時，它仍返回相同的值。這真是令人沮喪，我無法弄清楚什麼是錯的。我甚至嘗試過不設置一個值，但這只是返回0.

這是一個帶有所有HTML，CSS和JS的jsFiddle。如果更改值，結果仍然相同。我是新來的JavaScript，所以任何幫助表示讚賞。

Answer 1

從輸入中獲取值並在中計算單擊處理程序。這將是一個小副本糊狀但

recP.click(function() { 
    var l = $("#l").val(); 
    var w = $("#w").val(); 
    var rectangle = new Rectangle(l,w); 
    var recPerim = rectangle.calcPerim(l,w); 
    ansr.append("The perimeter is " + recPerim);  
}); 

recA.click(function() { 
    var l = $("#l").val(); 
    var w = $("#w").val(); 
    var rectangle = new Rectangle(l,w); 
    var recArea = rectangle.calcArea(l,w); 
    ansr.append("The area is " + recArea); 
}); 

檢查this

Answer 2

當您更改輸入字段中的值的值沒有改變的原因是因爲recPerim和recArea只是抱着值由函數在矩形對象返回：

recP.click(function() { 
    ansr.append("The perimeter is " + recPerim);  
}); 

recA.click(function() { 
    ansr.append("The area is " + recArea); 
}); 

所以他們總是會14和12，因爲這是你傳遞給你的矩形對象當你第一次創建它的值：

var l = $("#l").val(); 
var w = $("#w").val(); 

如果希望每次點擊都改變值，則需要再次調用.val（）以獲取當前輸入字段中的內容。因此，使用您的矩形類中的一個解決方案是創建一個新的矩形每次，傳遞了在當前輸入字段中的值：

recP.click(function() { 
var l = $("#l").val(); 
var w = $("#w").val(); 
var rectangle = new Rectangle(l,w); 
var recPerim = rectangle.calcPerim(l,w); 
    ansr.append("The perimeter is " + recPerim);  
}); 

recA.click(function() { 
var l = $("#l").val(); 
var w = $("#w").val(); 
var rectangle = new Rectangle(l,w); 
var recArea = rectangle.calcArea(l,w); 
    ansr.append("The area is " + recArea); 
}); 

像這樣。 （你也可以使用ansr.html（'area is ...'）而不是 - .html（）會在#ansr div中明確設置內部html（而不是追加），所以如果你多次點擊按鈕，你將不會得到一長串答案。）