checked function javascript not working. When I click on any of the shape it does not create the table structure

Question

When I click on any of the radio button , it does not create the table structure. I am getting the id of the radio button that is checked. and checking if a particular button is checked , create table structure accordingly. It does nothing.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Welcome to JavaScript</title>
</head>
<body>
<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>
<script type="text/javascript" src="Object.js"></script>
</body>
</html>

// JavaScript Code

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>';
}


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

Ok, you need to add an event listener to the 'change' event to a container of the radio buttons. This means that whenever the status of the buttons change, you can retrieve which one is checked and then do stuff. Right now (if this is all your js), checks which button is checked only when the app is launched and that's it. Js does not check if something changes at every moment, you need to define and add an event listener (http://www.w3schools.com/jsref/met_element_addeventlistener.asp) — G4bri3l, Feb 17 '16 at 03:38

score 0 · Accepted Answer · answered Feb 17 '16 at 03:42

Here is my fiddle:

LINK

I already gave you a brief explanation on the comment, you need to add an event listener and wrap the buttons into a div.

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>';
}
})

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

score 0 · Answer 2 · answered Feb 17 '16 at 03:44

I tried with javascript function in the html itself and its working. onChange event of the radio button calls the method tablep().

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to JavaScript</title>
        <script type="text/javascript">
            // method creates table structure
            function tablep() {
                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>';
                }
            }

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

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

        <input id= "circle" type = "radio" name= "shape" value= "circle"  onchange="tablep();" />Circle<br>
        <input id= "square" type = "radio" name= "shape" value= "square" onchange="tablep();"/>Square<br>
        <input id= "rectangle" type = "radio" name= "shape" value= "rectangle" onchange="tablep();"/>Rectangle<br>

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

score 0 · Answer 3 · edited May 23 '17 at 12:15

You need to attach the change event handler for every input. Now on change I am getting the target value and pass this as a parameter to _drawTable function.

Also note the use of switch-case instead of if-else You can take a look at HERE if you want to know why I opted for switch-case

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(event) { // 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 
}

JSFIDDLE EXAMPLE

checked function javascript not working. When I click on any of the shape it does not create the table structure

3 Answers3

Linked

Related