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

Question

I have this code for Javascript written in HTML that calculates areas of 4 shapes. I just need to implement on how to calculate the perimeter for square. Does anyone have the code for that and where can I add it here? Down below is the code for the above mentioned.

Thank you very much.

Kind regards

<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

You can simply use one more function:

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;
        }

and print the output as:

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