In this example I’ll write the code of the area and perimeter of a circle;
JavaScript Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!doctype html> <html> <head> <title>Code4Examples</title> <meta charset="utf-8"> <style> label{ display: block; } </style> </head> <body> <h1>Calculate Area and Perimeter of A Circle in JavaScript</h1> <h2 id="area"></h2> <h2 id="perimeter"></h2> <label for="radius">Radius: <input type="text" id="radius"> </label> <button id="calcBtn">Calculate</button> <script> var radEl=document.querySelector("#radius"); var calcBtn=document.querySelector("#calcBtn"); var areagEl=document.querySelector("#area"); var perimeterEl=document.querySelector("#perimeter"); //bind a function tothe onClick event the AddBtn calcBtn.onclick=function(){ //area formule pi*r^2 area=Number(radEl.value)*Number(radEl.value)*Math.PI; //perimeter formule 2*pi*r perimeter=2*Number(radEl.value)*Math.PI; //write the results into #area #perimeter document areagEl.innerHTML="Area of rectange:"+Math.round(area); perimeterEl.innerHTML="Perimeter of rectange:"+Math.round(perimeter); } </script> </body> </html> |
JavaScript Output:
