JSFiddle - React, Tailwind, and code Playground

by vasi_32

HTML

<h1>JavaScript - Object</h1>
<p> Enter the dimensions(Numbers Only)</p>

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

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

JavaScript

var getInputs = document.getElementsByName('shape'); // Get all input elements

for(var x = 0;x<getInputs.length;x++){
    var thisElement = getInputs[x];  // get each of the input
    thisElement.addEventListener('change',function(e){   // Adding the change event listener
      var getValue = event.target.value  // get the value of checked radio
      _drawTable(getValue);
    })
}

function _drawTable(getValue){
var getWrapper = document.getElementById("dim");
switch(getValue){
case "circle":
getWrapper.innerHTML = '<table id = "table" align ="center"> <tr> <td> Radius </td><td> <input id= "radius" type="text" name = "radius"></td></tr> <tr><td><button onclick="areaCircle()" > Area</button></td></tr>';
break;
case "square":
getWrapper.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>';
break;

case "rectangle":
getWrapper.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>';
break;
  }
}

function areaCircle()
{
  // code 
}
function areaRectangle()
{
   // code 
}
function arearSqaure()
{
   // code 
}