0

I have this JavaScript Code that calculates areas of 4 shapes.

I just need to implement on how to calculate the area for SQUARE with this formula 2 * (a*b + a*c + b*c).

I tried myself but it doesn't print any output.

https://drive.google.com/file/d/1DS4WI6G6fvthEDLxfQjgC4rM17pz_lkB/view

function calculateArea() {

    // get the selected shape
    let shape = document.getElementById("id_shapes").value;

    // calculate the shape's area
    let area = 0;
    switch (shape) {
        case "circle":
            let radius = document.getElementById("id_radius").value;
            area = Math.PI * radius * radius;
            break;
        case "triangle":
            let base = document.getElementById("id_base").value;
            let height = document.getElementById("id_height").value;
            area = base * height / 2;
            break;
        **case "square":
            let side = document.getElementById("id_side").value;
            area = 2 * (length * side + length * height + side * height);**
            break;
        case "rectangle":
            let length = document.getElementById("id_length").value;
            let width = document.getElementById("id_width").value;
            area = length * width;
            break;
}

// output the area
document.getElementById("id_output").innerHTML = "Area = " + area;
user8405
  • 27
  • 1
  • 2
  • 6
  • 3
    `I have this code for Javascript written in HTML` HTML is a markup language in which you can embed JavaScript, but you don't write JavaScript code in HTML. – t.niese May 15 '20 at 09:35
  • Yes, sorry, that is what I meant – user8405 May 15 '20 at 09:36
  • And what is your problem, is `area = side * side' resulting the wrong result? Do the other calculations work? What does `I tried myself but it doesn't print any output.` mean (Does the element with the ID `id_output` stay empty, unchanged, or is it only `Area = `? Do you see any error message in the console of your browser? – t.niese May 15 '20 at 09:38
  • Does this answer your question? [What is the correct way to write HTML using Javascript?](https://stackoverflow.com/questions/1533568/what-is-the-correct-way-to-write-html-using-javascript) – Liam May 15 '20 at 09:40
  • What is the SQUARE formula about? You do not use it in code, and it does not compute a square's area. – collapsar May 15 '20 at 09:41
  • 1
    Your function is never called. Also, could you please add your HTML? – Daan May 15 '20 at 09:42
  • I guess the `**` are just markers for the code section with issues; @user8405 Best use comments for that, ie. `/**/` in JS, `` in html. – collapsar May 15 '20 at 09:43
  • Btw, why don't you post the html part ? – collapsar May 15 '20 at 09:45
  • let side = document.getElementById("id_side").value; area = 2 * (length * side + length * height + side * height) break; that doesnt work, no output – user8405 May 15 '20 at 09:51
  • https://drive.google.com/file/d/1DS4WI6G6fvthEDLxfQjgC4rM17pz_lkB/view – user8405 May 15 '20 at 09:52
  • The question has to be self-contained, create a [mcve] here, with all information needed. Don't post links to google drive. – t.niese May 15 '20 at 09:56
  • 1
    There is no `let side = document.getElementById("id_side").value; area = 2 * (length * side + length * height + side * height) break;` in the shown code. – t.niese May 15 '20 at 09:57
  • still doesnt produce any output with that – user8405 May 15 '20 at 10:17

2 Answers2

2

Here is a snippet that shows how you can make your code work.

Unfortunately, you haven't shared your HTML, so I created my own as a demo.

function calculateArea(shape) {

    // calculate the shape's area
    switch (shape) {
        case "circle":
            let radius = document.getElementById("id_radius").value;
            return Math.PI * radius * radius;
        case "triangle":
            let base = document.getElementById("id_base").value;
            let height = document.getElementById("id_height").value;
            return base * height / 2;
        case "square":
            let side = document.getElementById("id_side").value;
            return side * side;
        case "rectangle":
            let length = document.getElementById("id_length").value;
            let width = document.getElementById("id_width").value;
            return length * width;
    }
}

console.log("Circle: " + calculateArea("circle"));
console.log("Triangle: " + calculateArea("triangle"));
console.log("Square: " + calculateArea("square"));
console.log("Rectangle: " + calculateArea("rectangle"));
<input id="id_base" type="number" value="5" />
<input id="id_height" type="number" value="5" />
<input id="id_length" type="number" value="5" />
<input id="id_width" type="number" value="5" />
<input id="id_radius" type="number" value="5" />
<input id="id_side" type="number" value="5" />
<input id="id_shapes" type="text" value="5" />

<div id="id_output"></div>
Daan
  • 2,680
  • 20
  • 39
0

The correct code for the js should be this:

const button = document.getElementById("calculate");
let area = 0;

function calculateArea() {
  // get the selected shape
  let shape = document.getElementById("id_shapes").value;
  // calculate the shape's area
  switch (shape) {
    case "circle":
      let radius = document.getElementById("id_radius").value;
      area = Math.PI * radius * radius;
      break;
    case "triangle":
      let base = document.getElementById("id_base").value;
      let height = document.getElementById("id_height").value;
      area = (base * height) / 2;
      break;
    case "square":
      let side = document.getElementById("id_side").value;
      area = side * side;
      break;
    case "rectangle":
      let length = document.getElementById("id_length").value;
      let width = document.getElementById("id_width").value;
      area = length * width;
      break;
  }
  document.getElementById("id_output").innerHTML = "Area = " + area;
}

button.addEventListener("click", calculateArea);

Every time you call the function "calculateArea()" it will update the value of "id_output".

I've tested this with this HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AREAS</title>
  </head>
  <body>
    id_shapes:<input
      type="text"
      id="id_shapes"
      placeholder="Enter item"
    /><br />
    id_radius:<input
      type="text"
      id="id_radius"
      placeholder="Enter item"
    /><br />
    id_base:<input type="text" id="id_base" placeholder="Enter item" /><br />
    id_height:<input
      type="text"
      id="id_height"
      placeholder="Enter item"
    /><br />
    id_side:<input type="text" id="id_side" placeholder="Enter item" /><br />
    id_length<input type="text" id="id_length" placeholder="Enter item" /><br />
    id_width<input
      type="text"
      id="id_width"
      placeholder="Enter item"
    /><br /><br />
    <button id="calculate">Calculate Area</button>

    <p id="id_output">?????</p>
    <script src="area.js"></script>
  </body>
</html>
Khelthos
  • 36
  • 3