1

簡単な式を計算するために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が初めてなので、助けていただければ幸いです。

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() を再度呼び出して、現在入力フィールドにあるコンテンツを取得する必要があります。したがって、四角形クラスを使用する 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);  
});

そのようです。(代わりに ansr.html('The area is...') を使用することもできます。長い文字列の回答は得られません。)

于 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 に答える