Create a JavaScript program that will compute for the Volume of a cuboid. Show the volume with compl-CodePudding

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>
    <head>
        <title>Calculate Area</title>
    </head>
    <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>
        <p id="answer" style='color:red;'></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)
            document.getElementById("answer").innerHTML = (result);
        }
    </script>
</html>

CodePudding user response：

Find the entire solution below:

    <!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<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;
    document.getElementById('answer').innerHTML = result;
    }
</script>
</html>

CodePudding user response：

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

<html>

  <head>
      <title>Calculate Area</title>
  </head>

  <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>
      <p id="answer"></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
          document.getElementById("answer").innerHTML = result;
      }
  </script>

</html>

CodePudding user response：

I did some corrections, you can check it out on this link: https://codesandbox.io/embed/strange-colden-w92gbw?fontsize=14&hidenavigation=1&theme=dark

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;

I hope it can help you.

<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>
    <p id ="answer" style='color:red;'></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)
      document.getElementById("answer").innerHTML = (result);
    }
    </script>

CodePudding user response：

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 are 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;}
fieldset {width: 30ch; padding-left: 25px;}
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'>
<head>
<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>
</head>
<body>
  <header>
    <h1>Area/Volume</h1>
    <h2>Calculator</h2>
  </header>
<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>