0

長方形の面積を計算する簡単な関数を書いています...

これが私のコードです：

<form id="rectangleForm" method="post">
<h1>Calculate the area of a rectangle:</h1>
<div>
    <label for="width">Width</label> 
    <input type="text" name="width" id="width" value="1.00" />
</div>
<div>
    <label for="height">Height</label>
    <input type="text" name="height" id="height" value="1.00"/>
</div>
<div>
    <label for="area">Area</label>
    <input type="text" name="area" id="rectarea" value="0.00" />
</div>
<div>
    <input type="submit" value="Calculate" id="submit" />
</div>

</form>
<script>

function rectangle() {
'use strict';
var area;
var width = document.getElementById('width').value;
var height = document.getElementById('height').value;
total = width * height;
document.getElementById('area').value = total;
return false;
}          

function init() {
   'use strict';
   var rectangleForm = document.getElementById('rectangleForm');
   rectangleForm.onsubmit = rectangle();
}

window.onload = init();
</script>

「キャッチされていない typeError: null のプロパティ '値' を読み取れません」というメッセージが表示されます。var width 行のエラー。理由がわかりません。誰か詳細や解決策を教えてもらえますか?

4

4 に答える 4

3

コードには 3 つの問題があります。

まず、次の行で：

rectangleForm.onsubmit = rectangle();

window.onload = init();

... and関数を呼び出し、その結果をandハンドラーとして割り当てます。つまり、関数はすぐに 1 回実行され、フォーム送信イベントに応答して実行されません。関数自体がハンドラーとして割り当てられるように、括弧を削除する必要があります。rectangle()init()onsubmitonload

rectangleForm.onsubmit = rectangle;

window.onload = init;

第二に、あなたのエリア入力はid="rectarea"あなたが使用するコードではありますが、document.getElementById("area")これらを一致させる必要があります。

第三に、関数にはディレクティブがありますが、変数'use strict';を宣言していないため、コードは実際には厳密ではありません。totalだから変更：

total = width * height;

に：

var total = width * height;

これらの変更を適用すると、コードは次のデモに示すように機能します: http://jsbin.com/avimac/1/edit

于 2013-06-23T02:30:19.610 に答える
1

これがあなたのスクリプトの実用的なフィドルです：

http://jsfiddle.net/sBRr7/2/

EDITED：nnnnnnによる追加のコメントに基づいて、私も更新しました（彼の答えはより説明的ですが）

投稿を削除しました:

<form id="rectangleForm">

入力の id を修正しました:

<input type="text" name="area" id="area" value="0.00" />

入力タイプをボタンに変更:

<input type="button" value="Calculate" id="submit" />

追加された変数宣言:

var total = width * height;

init 関数を次のように変更しました。

    var submit = document.getElementById('submit');
    submit.onclick = rectangle;

onload ハンドラを次のように変更しました。

window.onload = init;
于 2013-06-23T02:35:49.187 に答える
0

まず、ここでの明らかな誤りは、関数を実行せずに、onload および onsubmit 関数への参照を割り当てなければならないことです。このような...

windows.onload = init;

そしてまた...

rectangleFom.onSubmit = rectangle;

これらのエラーを修正してから試してください。

于 2013-06-23T02:30:07.340 に答える