1

我正在使用 javascript/jquery 来计算一些简单的公式。我通过创建对象然后使用 HTML 输入元素的值作为执行和返回答案所需的参数来做到这一点。

这是javascript（本问题末尾的jsfiddle链接中提供了HTML和CSS）：

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 新手，因此不胜感激。

4

2 回答 2

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('The area is...') - .html() 将在 #ansr div 内显式设置内部 html（而不是附加），因此如果您多次单击按钮，您不会得到一长串的答案。）

于 2013-07-28T22:49:28.513 回答
2

从输入中获取值并在点击处理程序中计算。这会有点复制粘贴，但是

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);  
});

检查这个

于 2013-07-28T22:35:41.367 回答