输入文本的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（而不是追加），所以如果你多次点击按钮，你将不会得到一长串答案。）