JSFiddle - React, Tailwind, and code Playground

by SuperG4bry

HTML

<body>
<h1>JavaScript - Object</h1>
<p> Enter the dimensions(Numbers Only)</p>
<div id="buttons">
  <input id= "circle" type = "radio" name= "shape" value= "circle"   />Circle<br>
  <input id= "square" type = "radio" name= "shape" value= "square" />Square<br>
  <input id= "rectangle" type = "radio" name= "shape" value= "rectangle" />Rectangle<br>
</div>

<p id= "dim"></p>

</body>

JavaScript

document.getElementById('buttons').addEventListener('change', function(){
	if(document.getElementById("rectangle").checked)

{
 alert("Rectangle");

    document.getElementById("dim").innerHTML = '<table id ="table" align =    "center"><tr><td> Length  </td><td> <input id = "len" type = "text" name = "length"></td></tr><tr><td>Breadth  </td><td><input id = "breadth" type ="text" name = "breadth"></td></tr><tr><td></td> <td><button onClick="areaRectangle()" >      Area</button></td></tr>';

   }

    else if(document.getElementById("circle").checked)

    {

    alert("Circle");
    document.getElementById("dim").innerHTML = '<table id = "table" align ="center"> <tr> <td> Radius </td><td> <input id= "radius" type="text" name = "radius"></td></tr> <tr><td><button onclick="areaCicle()" > Area</button></td></tr>';

}

else if(document.getElementById("square").checked)

{
    alert("Square");
    document.getElementById("dim").innerHTML = '<table id = "table" align ="center"> <tr> <td> Side </td><td> <input id= "side" type="text" name = "side"></td></tr> <tr><td><button onclick="areaSquare()" > Area</button></td></tr>';
}
})