javascript - JS code in HTML for calculating area of square. Area is included for all shapes, formula = 2 * (a*b + a*c + b*c) -

admin管理员组

文章数量:1384604

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.

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;

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

• javascript
• html
• formula
• area
• square

Share Improve this question Follow edited May 15, 2020 at 9:57 user8405 asked May 15, 2020 at 9:29 user8405user8405 2711 gold badge22 silver badges66 bronze badges 13

• 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 Commented May 15, 2020 at 9:35
• Yes, sorry, that is what I meant – user8405 Commented May 15, 2020 at 9: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 Commented May 15, 2020 at 9:38
• 1 Your function is never called. Also, could you please add your HTML? – Daan Commented May 15, 2020 at 9:42
• 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 Commented May 15, 2020 at 9:57

 |  Show 8 more ments

2 Answers 2

Sorted by: Reset to default 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>

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>

本文标签：