javascript 简单的Javascript矩形区域函数

Simple Javascript rectangle area function

提问by Ktown

I'm writing a simple function to calculate the area of a rectangle...

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

Here is my code:

这是我的代码：

<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>

I'm getting an "uncaught typeError: cannot read the property 'value' of null." error on the var width line. I don't understand why. Can anyone shed any details or solutions?

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

回答by nnnnnn

There are three problems in your code.

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

Firstly, on the following lines:

首先，在以下几行：

rectangleForm.onsubmit = rectangle();

window.onload = init();

...you are callingthe rectangle()and init()functions and assigning their results as the onsubmitand onloadhandler, which means the functions are run once straight away and not run in response to the form submission event. You need to remove the parentheses so that the functions themselves get assigned as handlers:

...你是打电话的rectangle()和init()功能并作为其分配结果onsubmit和onload处理程序，这意味着功能运行一次直线距离，而不是在响应表单提交事件中运行。您需要删除括号，以便函数本身被分配为处理程序：

rectangleForm.onsubmit = rectangle;

window.onload = init;

Secondly, your area input has id="rectarea"but in your code you use document.getElementById("area")- you need to match these up.

其次，您的区域输入有id="rectarea"但在您使用的代码中document.getElementById("area")- 您需要将它们匹配。

Thirdly, your functions have the 'use strict';directive, but then your code isn't actually strict because you don't declare the totalvariable. So change:

第三，你的函数有'use strict';指令，但是你的代码实际上并不严格，因为你没有声明total变量。所以改变：

total = width * height;

to:

到：

var total = width * height;

With those changes applied your code works as shown in this demo: http://jsbin.com/avimac/1/edit

应用这些更改后，您的代码将如本演示所示工作：http: //jsbin.com/avimac/1/edit

回答by conceptdeluxe

Here is a working fiddle of your script:

这是您的脚本的工作小提琴：

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

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

EDITED: Based on the additional comments by nnnnnn I updated mine aswell (although his answer is more explanatory)

编辑：根据 nnnnnn 的其他评论，我也更新了我的（尽管他的回答更具解释性）

Removed the post:

删除了帖子：

<form id="rectangleForm">

Fixed the id of the input:

修复了输入的 id：

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

Changed the input type to button:

将输入类型更改为按钮：

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

Added variable declaration:

添加变量声明：

var total = width * height; 

Changed the init function:

更改了 init 函数：

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

Changed the onload handler:

更改了加载处理程序：

window.onload = init;

回答by jacmkno

Only 3 things to fix in your code, working copy here: http://tests.dev.activisual.net/test2.html

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

1. Remove 'Use String'; That does nothing and in chrome it crashes the code.
2. Don't call the function before assigning it to the event (because the function gets executed instead of assigned), so instead of rectangleForm.onsubmit = rectangle();use rectangleForm.onsubmit = rectangle;
3. Be more carefull when calling your ids. Your result box is not called "area" is called "rectarea", so change getElementById('area')to getElementById('rectarea').

1. 删除“使用字符串”；那什么都不做，在 chrome 中它会使代码崩溃。
2. 在将其分配给事件之前不要调用该函数（因为该函数被执行而不是被分配），所以不要rectangleForm.onsubmit = rectangle();使用rectangleForm.onsubmit = rectangle;
3. 调用您的 ID 时要更加小心。您的结果框不称为“区域”，称为“rectarea”，因此更改getElementById('area')为getElementById('rectarea').

回答by mohkhan

First the obvious error here is that u have to assign a reference to onload and onsubmit functions and not execute the functions. Like this...

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

windows.onload = init;

And also ...

并且 ...

rectangleFom.onSubmit = rectangle;

Try after fixing these errors.

修复这些错误后尝试。