javascript面积和周长计算器 [英] javascript area and perimeter calculator
问题描述
我是javascript的新手，我正在尝试制作一个面积和周长计算器，以接收用户的输入并在相应的文本框中显示输出.我已经尝试了所有方法，但无法弄清楚哪里出了问题.
这是我所做的...请帮助！
I am new to javascript and I am trying to make an area and perimeter calculator that takes input from the user and displays the output in the corresponding text boxes. I''ve tried everyyything and cannot figure out where Iam going wrong.
here is what I''ve done...please help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Area and Perimeter Calculator</title>
<!--<style type="text/css">
.style1
{
height: 23px;
}
</style>-->
</head>
<body>
<div>
<h1><b>Area and Perimeter Calculator</b></h1>
<p>Enter the values below and click "Calculate"</p>
<table class="auto-style2">
<tr>
<td align="right">Length:</td>
<td align="left">
<input id="txtLength" type="text" /></td>
</tr>
<tr>
<td align="right">Width:</td>
<td align="left">
<input id="txtWidth" type="text" /></td>
</tr>
<tr>
<td align="right">Perimeter:</td>
<td align="left">
<input id="txtPerimeter" type="text" disabled='disabled'/>
</td>
</tr>
<tr>
<td align="right">Area:</td>
<td align="left">
<input id="txtArea" type="text" disabled='disabled' /></td>
</tr>
<tr>
<td></td>
<td>
<!-- <input type="button" id="btnCalculate" value="Calculate"
önclick='calculateArea()'; value = 'Calculate' <!-- align="mddle-->"
<input type= "button" id='btnCalculate' önclick= "CalculateArea();" value = "Calculate" />;</td>
</tr>
</table>
<script type = "text/javascript">
function CalculateArea() {
var txtWidth = document.getElementById("txtWidth").value;
var txtLength = document.getElementById("txtLength").value;
var txtArea = txtWidth.value * txtLength.value;
var txtPerimeter = txtWidth * 2 + txtLength * 2;
txtArea = document.getElementById('txtArea');
txtPerimeter = document.getElementById('txtPerimeter');
//
//document.getElementById("txtArea").value = txtArea;
// }
// function calculatePerimeter(){
// txtWidth = document.getElementById("txtWidth").value;
// txtLength = document.getElementById("txtLength").value;
// txtPerimeter = txtWidth * 2 + txtLength * 2;
</script>
</div>
</body>
</html>
推荐答案
在这里，这是错误的:var txtArea = txtWidth.value * txtLength.value;
您已经具有来自控件的值，无需再次执行.value.或者，如果您想通过getElementById获取对象.
此外，在分配回数据时，控件应位于左侧.
此处:
Here, this is wrong:var txtArea = txtWidth.value * txtLength.value;
You already have values from control, no need to do.valueagain. OR if you want to then just get the object via getElementById.
Further, while assigning back data, your control should be on left side.
Here:
function CalculateArea() {
var txtWidth = document.getElementById("txtWidth").value;
var txtLength = document.getElementById("txtLength").value;
var txtArea = txtWidth * txtLength;
var txtPerimeter = txtWidth * 2 + txtLength * 2;
document.getElementById('txtArea').value = txtArea;
document.getElementById('txtPerimeter').value = txtPerimeter;
}
或
OR
function CalculateArea() {
var txtWidth = document.getElementById("txtWidth");
var txtLength = document.getElementById("txtLength");
var txtArea = txtWidth.value * txtLength.value;
var txtPerimeter = txtWidth.value * 2 + txtLength.value * 2;
document.getElementById('txtArea').value = txtArea;
document.getElementById('txtPerimeter').value = txtPerimeter;
}
两者都可以.
Both would work.
您不会得到结果，因为您从未为元素txtPerimeter分配任何值.另外，当您尝试获取要用于输出周长值的元素时，您将覆盖先前为此变量计算的数值.显然，由于JavaScript是一种脚本语言，它使用松散类型系统，因此相同的变量首先会获得等于周长值的数值，但随后，您需要使用DOM元素对象覆盖此值用id="txtPerimeter"表示控件.
这应该足以解决问题(如果其他部分正确).应该是这样的
You don''t get the result because you never assign a value to the elementtxtPerimeter. Also, when you try to get an element to be used to output perimeter value, you override the numeric value previously calculated for this variable. As JavaScript is, apparently, a scripting language, which uses loose type system, the same variable first gets the numeric value equal to the perimeter value, but later on, you override this value with the DOM element object representing the control with theid="txtPerimeter".
That should be enough to resolve the problem (if other parts are correct). It should be something like
// calculate numeric values:
elementPerimeter = document.getElementById('txtPerimeter');
elementPerimeter.value = txtWidth * 2 + txtLength * 2; // using previously calculated txtWidth and txtLength
您最好避免在变量名中使用那些令人混淆的前缀"txt".并且，至少在一开始，请尽量不要重复使用这些变量.如果某个变量代表数字值，则仅将其用于数字值；否则，将其用于数字值.首先分配它，然后随着计算的进行修改.如果某个变量表示DOM元素，则只需对其进行一次计算(如使用getElementById)，并且在大多数简单情况下，请不要进行修改.
请参阅:
http://en.wikipedia.org/wiki/Loose_typing [ http://en.wikipedia.org/wiki/JavaScript [
You should better avoid those confusing prefixes "txt" in variable names. And, at least at first, try not to re-use the variables. If some variable represents the numeric value, use it for numeric values only; assign it first and modify as calculations go, or not. If some variable represents the DOM element, calculate it once (like using getElementById) and, in most simple cases, never modify.
Please see:
http://en.wikipedia.org/wiki/Loose_typing[^],
http://en.wikipedia.org/wiki/JavaScript[^].
It looks like you need to learn a lot of very basic stuff. JavaScript is pretty difficult for understanding and debugging, honestly. You might need to master some very basic general programming techniques on something much more simple (at least when it comes to basics), such as C#.
这篇关于javascript面积和周长计算器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
