已检查函数 JavaScript 不起作用.当我单击任何形状时，它不会创建表格结构

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

本文关键字：结构 表格 创建 任何形 JavaScript 函数 检查 不起作用 单击      更新时间：2023-09-26

当我单击任何单选按钮时，它不会创建表结构。我正在获取选中的单选按钮的 ID。并检查是否选中了特定按钮，相应地创建表结构。它什么都不做。

<!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 代码

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 
}
这是我

的小提琴：

链接

我已经在评论中为您提供了简要说明，您需要添加一个事件侦听器并将按钮包装成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>

我尝试在html本身中使用javascript函数及其工作。 单选按钮onChange事件调用方法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>

您需要为每个输入附加 change 事件处理程序。现在在更改时，我正在获取目标value并将其作为参数传递给_drawTable函数。

另请注意使用 switch-case 而不是 if-else如果你想知道我为什么选择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 示例

相关文章：