HTML中计算正方形周长的JS代码。仅包含所有形状的区域

Question

我在 HTML 中编写了用于 Javascript 的代码，用于计算 4 个形状的面积。我只需要实现如何计算正方形的周长。有没有人有代码，我可以在哪里添加它？下面是上面提到的代码。

非常感谢。

亲切的问候


<script>
    function updateForm() {

        // hide all inputs
        document.getElementById("id_inputs_circle").hidden = true;
        document.getElementById("id_inputs_triangle").hidden = true;
        document.getElementById("id_inputs_square").hidden = true;
        document.getElementById("id_inputs_rectangle").hidden = true;

        // get the selected shape and show its inputs
        let shape = document.getElementById("id_shapes").value;
        switch (shape) {
            case "circle":
                document.getElementById("id_inputs_circle").hidden = false;
                break;
            case "triangle":
                document.getElementById("id_inputs_triangle").hidden = false;
                break;
            case "square":
                document.getElementById("id_inputs_square").hidden = false;
                break;
            case "rectangle":
                document.getElementById("id_inputs_rectangle").hidden = false;
                break;
        }
    }

    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 = side * side;
                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;
    }
</script>
</body>
</html>
javascript-area-of-shapes.html
Displaying javascript-area-of-shapes.html.

Answer 1

您只需再使用一项功能即可：

function calculatePerimeter() {

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

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

并将输出打印为：

document.getElementById("some_other_id_output").innerHTML = "Perimeter = " + perimeter;

Answer 2

正方形的周长是通过将它的边乘以 4 来计算的。因为您有一个名为 calculateArea() 的函数。我建议你为周边创建一个功能。

function calculatePerimeter() {
  //If you are not going to reset or change the value it's suggested to use const
  const shape = document.getElementById("id_shapes").value;
  let perimeter = 0;
  switch (shape) {
    case "square": {
      const side = document.getElementById("id_side").value;
      perimeter = side * 4;
      break;
    }
  }

  // output the perimeter
  document.getElementById("id_output").innerHTML = "Perimeter = " + perimeter;
}

也许你可以为周边创建另一个部分并将输出更改为

document.getElementById("id_output_perimeter").innerHTML = "Perimeter = " + perimeter;

Answer 3

或者如果你想为此使用方法，你可以简单地尝试：

const square = {
    area(a){
        return a*a;
    },
    perimeter(a){
        return a*4;
    }
}

HTML中计算正方形周长的JS代码。仅包含所有形状的区域

JS code in HTML for calculating perimeter of square. Area is only included for all shapes

javascript

html

function

square