简单的加仑计算器答案

【问题标题】：Simple Gallon Calculator简单的加仑计算器
【发布时间】：2013-12-10 19:56:43
【问题描述】：

我正在尝试构建一个简单的网络表单，该表单接受 3 个数字输入并根据以下公式输出一个数字：(a*b*c)/271)。

这是我的代码，但输出中没有显示任何内容。

显然我几乎不知道自己在做什么。

感谢所有帮助：

<body>
<img id="logo"src="images/a&l.png" alt="A&L Cesspool"/>
<h1>Grease Trap Gallon Calculator<h2>
<form name=calculator">
<input label="length" type="number" id="a"> 
<input label="width" type="number" id="b">
<input label="height" type="number" id="c">
<input type=Button value=Calculate onClick="gallons();">
<input name="OUTPUT" id="output" SIZE="4" maxlength="6" >
</form>
<script language="JavaScript" type="text/javascript">
<!--
function gallons() {
var LENGTH = document.calculator.a.value;
var WIDTH = document.calculator.b.value;
var HEIGHT = document.calculator.c.value;
var Total =(LENGTH*WIDTH*HEIGHT)/271;
document.calculator.OUTPUT.value = Total;
}
// -->
</script>

【问题讨论】：

您还缺少<form name=calculator"> 的开场白——应该是<form name="calculator">。

标签： javascript html calculator

【解决方案1】：

document.forms.calculator。没有document.calculator 这样的东西。此外，表单元素需要 name 属性才能在表单上下文中引用它们，而不是 ID。

在其他新闻中

您有未闭合的引号
您有不规则的命名约定（OUTPUT、a、Total）
您有不定期报价政策（有时有，有时没有）。

基本上

<form name="calculator">
    <input label="length" type="number" name="a">
    <input label="width" type="number" name="b">
    <input label="height" type="number" name="c">
    <input type=Button value=Calculate onClick="gallons();">
    <input name="OUTPUT" id="output" SIZE="4" maxlength="6">
</form>

function gallons() {
    var LENGTH = document.forms.calculator.a.value;
    var WIDTH = document.forms.calculator.b.value;
    var HEIGHT = document.forms.calculator.c.value;
    var Total = (LENGTH * WIDTH * HEIGHT) / 271;
    document.forms.calculator.OUTPUT.value = Total;
}

请从 MDN 或类似的好资源中获取合适的教程，然后开始阅读。

【讨论】：

公平地说，您可以通过id 引用输入，但改用document.getElementById。
@Dai: "在表单上下文中"

【解决方案2】：

您对document.calculator 的调用未找到该元素，因为它通过 id 查找更改您的表单定义，它将起作用

<form name="calculator" id="calculator">

【讨论】：