Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

只要给他们正确的身份证件

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

它应该有效 - ＆gt; FIDDLE

Answer 2

document.getElementById("square") 和由于您错过了输入中的ID

，因此document.getElementById("circle")无法解决

＆＃13;

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

＆＃13;

Answer 3

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

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

3 个答案: