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文件的结构可能有问题，但我们无法看到它，因为您只发布了片段。

W3C validator和HTML5 validator是您的朋友。

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

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

Answer 3

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

我开始稍微改变你的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>标记）。

我已经包含了一些评论，因此您可以看到发生了什么。但是评论中没有包含访问字段的内容。请注意，一旦我们获取表单元素，我们就可以通过名称访问这些字段。这使得函数非常小（字符明智），这使得它更容易阅读和遵循。

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

最后，这是指向您可以使用

的Fiddle工作的链接

SIDE NOTE

您的按钮被定义为"submit"输入，它将强制提交您的表单，点击将被忽略。您可以尝试将其设为"button"，然后不再使用return false;，但我建议您查看上面的内容并查看现代JavaScript开发，并避免因嵌入所有这些而导致的陷阱粘贴在你的HTML中。

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

3 个答案: