gpt4 book ai didi

javascript - 为什么我无法在 Javascript 中提取并计算用户表单输入?

转载 作者:行者123 更新时间:2023-12-02 14:03:23 24 4
gpt4 key购买 nike

我正在为网站构建一个体积计算器,但是,我似乎无法从表单中获取用户输入以拉入 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;

它也不显示任何输出。有人会碰巧看到我在这里缺少什么吗?

最佳答案

没有 ID 为 circlesquare 的元素,只有这些值

<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

关于javascript - 为什么我无法在 Javascript 中提取并计算用户表单输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40221580/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com