Question

我正在编写一个简单的函数来计算矩形区域......

这是我的代码：

<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宽度线上的错误。我不明白为什么。有人可以提供任何细节或解决方案吗

Answer 1

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

首先，在以下几行：

rectangleForm.onsubmit = rectangle();

window.onload = init();

...您正在调用 rectangle()和init()个函数并将其结果指定为onsubmit和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

Answer 2

这是你的剧本的一个工作小提琴：

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;

更改了init函数：

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

更改了onload处理程序：

window.onload = init;

Answer 3

首先，这里明显的错误是你必须为onload和onsubmit函数分配一个引用，而不是执行这些函数。像这样......

windows.onload = init;

还有......

rectangleFom.onSubmit = rectangle;

在修复这些错误后尝试。

Answer 4

您的代码中只需修改3件事，请在此处复制：http://tests.dev.activisual.net/test2.html

删除'使用字符串';这没有任何作用，在Chrome中它会使代码崩溃。
在将函数分配给事件之前不要调用该函数（因为该函数已执行而不是已分配），因此不使用rectangleForm.onsubmit = rectangle(); rectangleForm.onsubmit = rectangle;
打电话给你的ids时要小心点。您的结果框未被称为“区域”，称为“rectarea”，因此将getElementById('area')更改为getElementById('rectarea')。

简单的Javascript矩形区域功能

4 个答案: