平行四边形函数的区域，javascript

Question

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

我不确定这段代码不工作的原因。这似乎是一个简单的程序，请帮助。

Answer 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。这也适用于表单中的字段。 areaFormbase字段在这里只有一个含义，不需要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 - 这是现代网络的发展令人难以接受的，是“关注点分离”的一部分。 HTML是一个定义视图布局的地方，CSS允许您定义视图对用户的显示方式，JavaScript定义视图如何交互或变异。所有这些数据都应该完全独立 - 意味着没有内联样式或内联JavaScript（改用<style>和<script>标签）。

我已经包含一些评论，所以你可以看看发生了什么。但是评论中没有包含的内容是访问这些字段。注意，一旦我们获取表单元素，我们可以简单地通过名称访问这些字段。这使得该功能非常小（字符明智），这也使得阅读和遵循更容易。

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

最后，这里是一个链接到工作Fiddle你可以玩

边注

您的按钮被定义为"submit"输入，是要迫使提交表单，点击会忽略。你可以尝试使它成为"button"，然后使return false;成为不必要的，但我希望你能回顾一下上面的内容，研究一下现代JavaScript的开发，并避免在你的HTML中嵌入所有这些垃圾所带来的缺陷。

Answer 2

你的代码像冠军一样工作。 HTML文件的结构可能存在问题，但我们无法看到它，因为您仅发布了片段。

W3C validator和HTML5 validator是你的朋友。

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

Answer 3

您的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>