为什么我不能在 Javascript 中提取和计算用户表单输入？

Question

我正在为网站构建体积计算器，但是，我似乎无法从表单中获取用户输入以拉入 Javascript 并计算体积。它不产生任何输出。

function calculate() {
    var x = 0;
    var length = parseFloat(document.getElementById("length").value) * 12;
    var width = parseFloat(document.getElementById("width").value) * 12;
    var depth = parseFloat(document.getElementById("depth").value);
    if (document.getElementById("square").checked)
    {
        x = (length * width * depth) / 12;
    }
    else if (document.getElementById("circle").checked)
    {
        x = (Math.PI * length * width * depth / 4) / 12;
    }
    document.getElementById("result").innerHTML = x;
}

<!DOCTYPE html>
<html>
    <body>
        <form id="frm1" action="form_action.asp">
            <table>
                <tr>
                    <td>
                        Type:
                    </td>
                    <td>
                        <input type="radio" name="type" value="square" checked> Cubic<br />
                        <input type="radio" name="type" value="circle"> Cylinder<br />
                    </td>
                </tr>
                <tr>
                    <td>
                        Length: <br />
                        (in feet)
                    </td>
                    <td>
                        <input type="text" id="length">
                    </td>
                </tr>
                <tr>
                    <td>
                        Width:  <br />
                        (in feet)
                    </td>
                    <td>
                        <input type="text" id="width">
                    </td>
                </tr>
                <tr>
                    <td>
                        Depth: <br />
                        (in Inches) 
                    </td>
                    <td>
                        <input type="text" id="depth">
                    </td>
                </tr>
            </table>
        </form>
        <button onclick="calculate()"><font color="#979189">Calculate</font></button>

        <label id="result"> </label> Cubic Feet

        <script>
        </script>

    </body>
</html>

脚本应该将计算结果输出到标签中，但似乎什么也没有发生。当我尝试将数据直接从表单字段输出到标签时：

document.getElementById("result").innerHTML = document.getElementById("length").value;

它也没有显示任何输出。有人会碰巧看到我在这里错过了什么吗？

Answer 1

没有 ID 为 circle 或 square 的元素，只有这些值

<input type="radio" name="type" value="square" checked> Cubic
<input type="radio" name="type" value="circle"> Cylinder

这意味着你不能做

document.getElementById("square").checked

只要给他们正确的 ID

<input id="square" type="radio" name="type" value="square" checked> Cubic
<input id="circle" type="radio" name="type" value="circle"> Cylinder

它应该可以工作 -> FIDDLE

Answer 2

document.getElementById("square") 和 document.getElementById("circle") 无法解决，因为您错过了输入中的 ID

<!DOCTYPE html>
<html>
    <body>
        <form id="frm1" action="form_action.asp">
            <table>
                <tr>
                    <td>
                        Type:
                    </td>
                    <td>
                        <input type="radio" name="type" value="square" id="square" checked> Cubic<br />
                        <input type="radio" name="type" value="circle" id="circle"> Cylinder<br />
                    </td>
                </tr>
                <tr>
                    <td>
                        Length: <br />
                        (in feet)
                    </td>
                    <td>
                        <input type="text" id="length">
                    </td>
                </tr>
                <tr>
                    <td>
                        Width:  <br />
                        (in feet)
                    </td>
                    <td>
                        <input type="text" id="width">
                    </td>
                </tr>
                <tr>
                    <td>
                        Depth: <br />
                        (in Inches) 
                    </td>
                    <td>
                        <input type="text" id="depth">
                    </td>
                </tr>
            </table>
        </form>
        <button onclick="calculate()"><font color="#979189">Calculate</font></button>

        <label id="result"> </label> Cubic Feet

        <script>
            function calculate() {
                var x = 0;
                var length =  parseFloat(document.getElementById("length").value) * 12;
                var width =  parseFloat(document.getElementById("width").value) * 12;
                var depth = parseFloat(document.getElementById("depth").value);
                if ( document.getElementById("square").checked )
                {
                    x = (length * width * depth) / 12;
                }
                else if ( document.getElementById("circle").checked )
                {
                    x = (Math.PI * length * width * depth / 4) / 12;
                }
                document.getElementById("result").innerHTML = x;
            }
        </script>

    </body>
</html>

Answer 3

当您运行代码时，它会在控制台中显示错误，表明您正在尝试访问 ID 为方形或圆形但不存在的元素，这些是单选按钮。您应该给他们 ID 或以其他方式处理它们：http://www.homeandlearn.co.uk/JS/radio_buttons.html

为什么我不能在 Javascript 中提取和计算用户表单输入？

Why can't I pull and calculate user form input in Javascript?

html

javascript

forms

label

getelementbyid