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>

我收到“未捕获的类型错误：无法读取 null 的属性‘值’。” var 宽度线上的错误。我不明白为什么。任何人都可以提供任何细节或解决方案吗？

4

4 回答 4

3

您的代码中存在三个问题。

首先，在以下几行中：

rectangleForm.onsubmit = rectangle();

window.onload = init();

...您正在调用rectangle()andinit()函数并将其结果分配为​​andonsubmit处理onload程序，这意味着这些函数会立即运行一次，而不是响应表单提交事件而运行。您需要删除括号，以便将函数本身分配为处理程序：

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/

已编辑：根据 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;

更改了初始化函数：

    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 回答
0

您的代码中只有 3 件事需要修复，工作副本在这里：http ://tests.dev.activisual.net/test2.html

  1. 删除“使用字符串”；这什么也没做，在 chrome 中它会使代码崩溃。
  2. 在将函数分配给事件之前不要调用函数（因为函数被执行而不是被分配），所以不要rectangleForm.onsubmit = rectangle();使用rectangleForm.onsubmit = rectangle;
  3. 拨打您的身份证时要更加小心。你的结果框不是叫“area”而是叫“rectarea”，所以getElementById('area')改成getElementById('rectarea').
于 2013-06-23T02:48:09.597 回答