简单的Javascript矩形区域功能

Question

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?

Answer 1

There are three problems in your code.

Firstly, on the following lines:

rectangleForm.onsubmit = rectangle();

window.onload = init();

...you are calling the rectangle() and init() functions and assigning their results as the onsubmit and onload handler, 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:

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.

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

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

Answer 2

Here is a working fiddle of your script:

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

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

Removed the post:

<form id="rectangleForm">

Fixed the id of the input:

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

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

Changed the onload handler:

window.onload = init;

Answer 3

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

windows.onload = init;

And also ...

rectangleFom.onSubmit = rectangle;

Try after fixing these errors.

Answer 4

Only 3 things to fix in your code, working copy here: 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') .