Answer to Question #213444 in Web Development for Fsina

Question #213444

what do you wish to calculate:

area perimeter

enter values ______ submit<----button


the page allows the user calculate area or perimeter of a parallelogram. First user will select an option, then enters necessary parameters separated by comma. write a JavaScript function called shapeFormulas(0 to calculate and display area or perimeter in an alert.

the function should display an error if user does not follow the required input format.

Area : base x height

perimeter : 2 x (side1+side2)


example one

user select area

input:5,10

output: the area is : 50


example two

user select perimeter

input:5,10

output:the perimeter is:30


example three

user select Area

input: 2 3

output: Invalid parameters


1
Expert's answer
2021-07-06T00:29:43-0400
<!DOCTYPE html>
<html>
    <body>
        <h3>What do you wish to calculate?</h3>
        <div>
            <input type = "radio" name = "calculation" value = "Area" checked>Area
            <input type = "radio" name = "calculation" value = "Perimeter">Perimeter
        </div>
        <div>
            Enter values<input type ="text" id = "textfield"><button type = "button" onclick="shapeFormulas()">Submit</button>
        </div>
        <script>
            function shapeFormulas(){
                var arr1 = document.getElementById('textfield').value;
                var arr2 = arr1.split(',');
                var b = parseInt(arr2[0]);
                var h = parseInt(arr2[1]);
                var res = document.getElementsByName('calculation');
                if(isNaN(b) || isNaN(h)){
                    alert("Invalid parameters");
                    return;
                }
                else if(res[0].checked){
                    area = b * h;
                    alert("the area is :"+area);
                    return;
                }
                else if(res[1].checked){
                    perimeter = 2 * (b + h);
                    alert("the perimeter is: "+perimeter);
                    return;
                }
            }
        </script>
    </body>
</html>

Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Comments

No comments. Be the first!

Leave a comment

LATEST TUTORIALS
New on Blog
APPROVED BY CLIENTS