Ex No: 8 FIND AREA OF RECTANGLE
Aim: To write a JavaScript code to find area of rectangle on clicking submit button.
Algorithm
Step1: Create a folder “Ex8” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Use document.getElementById to get value of input elements.
Step4: Use addEventListener method to add an event to handle Form Submittion.
Step5: Calculate area of rectangle and display the result.
Source Code
Try It

index.html


<!DOCTYPE html>
<html>
   <head>
      <title>Area of Rectangle</title>   
   <style>
     header {
      text-align:center;
      height: 100px;
      background-color: olive;
      padding: 10px;
      border-radius: 10px 10px 0px 0px;
     }
     footer {
      text-align:center;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
      background-color: olive;
      padding: 10px;
      border-radius: 10px;
     }
   </style>
   </head>
   <body>      
      <header>
         <h1>Area of Rectangle</h1>
      </header>   
      <hr>
      <form id="areaForm">
         <lable for="len">Enter Length</label>
         <input type="text" id="len" name="len" required><br><br>
         <lable for="bre">Enter Breadth</label>
         <input type="text" id="bre" name="bre" required><br><br>
         <input type="submit" value="Calculate">
      </form>
      <h3 id="res"></h3>
      <footer>
         Developed by K Anbarasan
      </footer>      
      <script type="text/javascript">
         document.getElementById("areaForm").addEventListener('submit', function(event){
            event.preventDefault();
            let len = document.getElementById("len").value;
            let bre = document.getElementById("bre").value;
            let res = len*bre;
            document.getElementById("res").innerHTML="Area of Rectangle is "+res;
         });         
      </script>
   </body>
</html>
Result: Thus JavaScript code to find area of rectangle on clicking submit button.