平行四边形函数的面积，javascript答案

【问题标题】：Area of parallelogram function, javascript平行四边形函数的面积，javascript
【发布时间】：2014-12-27 07:01:05
【问题描述】：

<h2>Area of a Parallelogram (A = base * height)</h2>
    <form>
    <label class = "left">Base: </label> <input id = "parallelogramAreaBase" type = "text" class = "right" /> <br />    
    <label class = "left">Height: </label> <input id = "parallelogramAreaHeight" type = "text" class = "right" /> <br />
    <label class = "left">Answer: </label> <input id = "answerAreaParallelogram" type = "text" class = "right" /> <br />
    <input type = "submit" value = "Submit" onclick = "areaParallelogramFunction(); return false" />
    </form>

function areaParallelogramFunction(base, height)
{
    base = document.getElementById("parallelogramAreaBase").value;
    height = document.getElementById("parallelogramAreaHeight").value;
    var answer = base * height;
    document.getElementById("answerAreaParallelogram").value = answer;
}

我不确定为什么这段代码不起作用。这似乎是一个简单的程序，请帮助。

【问题讨论】：

“不工作”是什么意思？您在这里缺少明确的问题陈述。

标签： javascript html area

【解决方案1】：

我知道这是一个答案块，但我想利用这个空间为您提供一些学习，而不是解决您的问题。这个新的解决方案应该让你更清楚正确的结果（希望如此）。

我从稍微改变你的 HTML 开始：

<h2>Area of a Parallelogram (A = base * height)</h2>
<form id="areaForm">
    <label class="left">Base: </label> <input name="base" type="text" class="right" /><br />    
    <label class="left">Height: </label> <input name="height" type="text" class="right" /><br />
    <input type="submit" value="Solve" /><br />
    <label class="left">Answer: </label> <input name="answer" type="text" class="right" disabled />
</form>

那么我改变了什么？首先你可能会注意到我把答案放在按钮后面。这是我的风格选择，因为答案不是表单的一部分，而是显示结果的地方。也不是我添加了disabled。这是因为用户不应该能够编辑答案，答案是由程序呈现的，不是可编辑的字段。

您会注意到的另一件事是那些令人难以置信的长描述性 ID 消失了，取而代之的是短名称。这些名称将在 JavaScript 中发挥作用，并使我们的生活更轻松。另请注意，我已在描述表单的表单中添加了一个 id。这也适用于表单中的字段。 areaForm base 字段在这里只有一个含义，不需要areaFormBaseValue 或类似的样式名称。

接下来是 JavaScript。

// Let's fetch the form to begin with, we'll be using it.
// Notice the use of 'var', ALWAYS use 'var' when you 
// create a new variable. ALWAYS.
var form = document.getElementById("areaForm");

// Let's add the event a much better way, mingling logic
// (javascript) in your HTML is considered bad practice.
form.onsubmit = function() {
    // We chain the var statement with a comma, this is the
    // exact same as making two seperate var statements.
    // Now you can see we also calculate the result in this var
    // statement.
    var base = parseFloat(form.base.value),
        height = parseFloat(form.height.value),
        answer = base * height;

    form.answer.value = answer;

    // We return false here to prevent the form to be submitted naturally
    return false;
};

我从 HTML 中删除了对函数调用的引用——这在现代 Web 开发中是不受欢迎的，并且是“关注点分离”的一部分。 HTML 是您定义视图布局的地方，CSS 允许您定义视图如何呈现给用户，而 JavaScript 定义视图如何交互或变化。所有这些数据都应该彼此完全分开——这意味着没有内联样式或内联 JavaScript（改用 <style> 和 <script> 标签）。

我已经包含了一些 cmets，所以你可以看到发生了什么。但是 cmets 中不包括的是访问字段。请注意，一旦我们获取表单元素，我们就可以简单地通过它们的 name 访问这些字段。这使得函数非常小（字符方面），这也使得它更容易阅读和遵循。

我还添加了对parseFloat 的调用，它将采用字符串（来自type="text" 字段）值并转换为浮点数。将值转换为数字很重要。这将（如果您添加更多代码）允许您检测是否输入了无效输入，并明确说明您对代码的意图。

最后，这是一个可以使用的Fiddle 的链接

旁注

您的按钮被定义为"submit" 输入，它将强制提交您的表单，单击将被忽略。您可以尝试将其设为"button"，而不是这样就不需要尾随的return false;，但我敦促您查看上面的内容并研究现代JavaScript开发并避免将所有这些垃圾嵌入到您的HTML中可能出现的陷阱.

【讨论】：

【解决方案2】：

您的 JavaScript 需要保留在 <script> 标记中！

<h2>Area of a Parallelogram (A = base * height)</h2>
    <form>
    <label class = "left">Base: </label> <input id = "parallelogramAreaBase" type = "text" class = "right" /> <br />    
    <label class = "left">Height: </label> <input id = "parallelogramAreaHeight" type = "text" class = "right" /> <br />
    <label class = "left">Answer: </label> <input id = "answerAreaParallelogram" type = "text" class = "right" /> <br />
    <input type = "submit" value = "Submit" onclick = "areaParallelogramFunction(); return false" />
    </form>

<script>
function areaParallelogramFunction(base, height)
{
    base = document.getElementById("parallelogramAreaBase").value;
    height = document.getElementById("parallelogramAreaHeight").value;
    var answer = base * height;
    document.getElementById("answerAreaParallelogram").value = answer;
}
</script>

【讨论】：

【解决方案3】：

您的代码就像一个冠军。您的 HTML 文件的结构可能有问题，但我们看不到它，因为您只发布了片段。

W3C validator 和 HTML5 validator 是你的朋友。

然后学习如何使用 JavaScript 控制台。如果您不这样做并使用其他测试工具（如验证器），那么您工作太辛苦了。

【讨论】：