Nov 18, 2022

# Solution 1 :

Find the entire solution below:

``````    <!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculate Area</title>
<body>
<h2 style="color: blue">Calculating Volume Rectangle</h2>
Length: <input type="text" id="length" /><br />
<br />
Width: <input type="text" id="width" /><br />
<br />
Height: <input type="text" id="height" /><br />
<button style="margin-top: 10px" onclick="calculate()">Calculate</button>
<div style="display: flex">
<p>The Volume of the Rectangle is:</p>
<p id="answer" style="color: red; margin-left: 10px"></p>
</div>
</body>
<script>
function calculate() {
var length = document.getElementById('length').value;
var width = document.getElementById('width').value;
var height = document.getElementById('height').value;
var result = length * width * height;
}
</script>
</html>
``````

# Solution 2 :

you have some missing =, ” and ‘ in the code and also parse string values to int for multiply.

``````<html>

<title>Calculate Area</title>

<body>
<h2 style="color:blue;">Calculating Volume Rectangle</h2>
Length: <input type="text" id="length"><br>
<br>
Width: <input type="text" id="width"><br>
<br>
Height: <input type="text" id="height"><br>
<br>
<input type="submit" value='Calculate Area' onclick="calculate()"> <!-- always use brakets when you are calling to a function -->
<p>The Volume of the Rectangle is:</p>

</body>
<script>
function calculate() {
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
var height = document.getElementById("height").value;
var result = parseInt(length) * parseInt(width) * parseInt(height);  //convert extracted string values to integers
}
</script>

</html>``````

# Solution 3 :

I did some corrections, you can check it out on this link:

But basically:
On line 15, you put an `onClick` but pass the value link a string `calculate`, pass an empty param `calculate()` in the onClick and in the `function` on line 21.
On line 22 at the end of `var length` theres a `("length')`.value, I changed to `("length").value`;

``````<h2 style = "color:blue;">Calculating Volume Rectangle</h2>
Length: <input type = "text" id ='length'><br>
<br>
Width: <input type="text" id="width"><br>
<br>
<input type="submit" value = 'Calculate Area' onclick = "calculate()">
<p>The Volume of the Rectangle is:</p>

</body>
<script>
function calculate(){
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
var height = document.getElementById("width").value;
var result = (length) * (width) * (height)
}
</script>
``````

# Solution 4 :

Here is a list of the most relevant points concerning the many problems that plagues the OP code:

If you are using more than one form control (ex. `<input>`, `<button>`, `<output>`, etc), wrap everything in a `<form>`. Having a `<form>` allows you to use very useful interfaces:

Keep in mind, all HTML is basically strings. An htmlString is a string that can be parsed into HTML, all values of HTML attributes are strings, the only time when value of form controls are accessible real numbers is when it is extracted as a string then converted into a real number. There are a few ways to convert a string into a number:

• `.parseInt()` method
• `.parseFloat()` method
• `Number()` constructor
• `* / - +` operators by cohersion (`+`is used through out the example)

Finally, event delegation is used to handle the “input” Events on each `<input>` within the `<form>`. Also, do not use inline event attributes — inline event handlers are garbage.

``````// Reference <form>
const calc = document.forms.calc;

// Register the "input" event to <form>
calc.oninput = calcDim;

// Event handler passes Event Object
function calcDim(e) {
/*
HTMLFormControlsCollection (all <input>, <button>, <output>, <fieldset>)
e.target references the element the user is currently typing into.
*/
const io = this.elements;
const active = e.target;

/*
If >active< [name="num"]...
...if >H< is [disabled] OR it's .value = 0...
...>result< .value = >L< * >W<...
...Otherwise >result< .value = >L< * >W< * >H<
*/
if (active.name === 'num') {
if (io.H.disabled === true || +io.H.value === 0) {
io.result.value = +io.L.value * +io.W.value;
} else {
io.result.value = +io.L.value * +io.W.value * +io.H.value;
}
}

/*
If >L< .value AND >W< .value are both greater than 0...
...>H< is not [disabled]...
...Otherwise >H< is [disabled]
*/
if (+io.L.value > 0 && +io.W.value > 0) {
io.H.disabled = false;
} else {
io.H.disabled = true;
}

/*
If >H< .value is greater than 0...
...The result <label> [data-dim] is 'Volume'...
...Otherwise it's 'Area'
*/
if (+io.H.value > 0) {
document.querySelector(`[for='result']`).dataset.dim = 'Volume';
} else {
document.querySelector(`[for='result']`).dataset.dim = 'Area';
}
};  ``````
``````*, *::before, *::after {box-sizing: border-box;}
html {font: 2.5ch/1.15 'Segoe UI'}
h1 {font-size: 1.6em; margin-bottom: 4px;}
h2 {font-size: 1.4em;}
legend {margin: 0 0 1ch -1ch; font-size: 1.25rem;}
input, output {display: inline-block; width: 10ch; font: 2ch/1.15 Consolas; text-align: center}
label {display: inline-block; width: 8ch;}
[for='result']::before {content: attr(data-dim)}
[for='result']::after {content:': '}
#L {width: 10.05ch; margin-left: -1px;}
#result {margin-left: -8px;}
[disabled='true'] {opacity: 0.4;}``````
``````<!DOCTYPE html>
<html lang='en'>
<title></title>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<style>
/* CSS Block */
</style>
<body>
<h1>Area/Volume</h1>
<h2>Calculator</h2>
<main>
<form id='calc'>
<fieldset>
<legend>Length,&nbsp;Width,&nbsp;&amp;&nbsp;Hieght</legend>
<label for='L'>Length:&nbsp;</label>
<input id='L' name='num' type='number' min='0' placeholder='0'><br>
<label for='W'>Width:&nbsp;&nbsp;</label>
<input id='W' name='num' type='number' min='0' placeholder='0'><br>
<label for='H'>Hieght:&nbsp;&nbsp;</label>
<input id='H' name='num' type='number' min='0' placeholder='0' disabled><br>
</fieldset>
<fieldset>
<label for='result' data-dim='Area'></label>
<output id='result'></output>
</fieldset>
</form>
</main>

<script>
/* Inline JavaScript */
</script>
</body>
</html>``````

# Problem :

The result does not appear. I’m quite new so I do not know what to do. I want the volume/result to appear. The code I used is:

``````<html>
<title>Calculate Area</title>
<body>
<h2 style = "color:blue;">Calculating Volume Rectangle</h2>
Length: <input type = "text" id = 'length'><br>
<br>
Width: <input type = "text" id = "width"><br>
<br>
<input type = "submit" value = 'Calculate Area' onclick = "calculate()">
<p>The Volume of the Rectangle is:</p>
</body>

<script>
function calculate()
{
var length = document.getElementById("length').value;
var width = document.getElementById("width").value;
var height = document.getElementById("width").value;
var result = (length) * (width) * (height)
}
</script>
</html>
``````

### Comment posted by Ian

I think you mean the volume of a cuboid/cube since you can’t get the volume of a rectangle. Its only a 2D shape without depth

### Comment posted by AKX

(1) You’re looking up

### Comment posted by Ian

You are not also getting the value of height from html

### Comment posted by kmoser

There is no need to