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（'区域是......'） - .html（）将在#ansr div中明确设置内部html（而不是追加），所以如果你多次点击按钮，你不会得到一长串答案。）

输入文本的JQuery值不作为参数

2 个答案: