Html 基本的 javascript 华氏/摄氏度计算器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15122347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Basic javascript Fahrenheit/Celsius calculator
提问by Jessica Walker Sanchez
I'm trying to do a Celsius/Fahrenheit conversion calculator, with a button for each conversion and the result being displayed in the appropriate textbox. I must be missing something obvious here... I'm brand new to javascript and am just not getting it. Here's what I have done so far:
我正在尝试做一个摄氏/华氏转换计算器，每个转换都有一个按钮，结果显示在适当的文本框中。我一定在这里遗漏了一些明显的东西......我是 javascript 的新手，只是没有得到它。这是我到目前为止所做的：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>Convert Fahrenheit and Celsius</title>
<script type="text/javascript">
<!--
function convertToC() {
var fTempVal = parseFloat(document.getElementById('fTemp').value);
var cTempVal = (fTempVal - 32) * (5/9);
document.getElementById('cTemp').value = cTempVal;
}
function convertToF() {
var cTempVal = parseFloat(document.getElementById('cTemp').value);
var fTempVal = (cTempVal * (9/5)) + 32;
document.getElementById('fTemp').value = fTempVal;
}
// -->
</script>
</head>
<body>
<form name="conversionForm">
<table border="1">
<tbody>
<tr>
<td>Fahrenheit</td>
<td><input name="fTemp" type="text"/></td>
<td><button onclick="convertToC">Convert to Celsius</button></td>
</tr>
<tr>
<td>Celsius</td>
<td><input name="cTemp" type="text"/></td>
<td><button onclick="convertToF">Convert to Fahrenheit</button></td>
</tr>
</form>
</tbody>
</table>
</body>
</html>
回答by j08691
You have a few errors. See this corrected jsFiddle example.
你有几个错误。请参阅此更正后的jsFiddle 示例。
- Your input boxes were missing IDs that you were trying to reference with
document.getElementById - Your HTML was improperly closed.
- Your buttons were missing types which makes them default to submitwhen you really wanted just button
- To prevent the form from actually being submitted you should return false.
- 您的输入框缺少您尝试引用的 ID
document.getElementById - 您的 HTML 未正确关闭。
- 您的按钮缺少类型，这使它们在您真正想要按钮时默认提交
- 为了防止表单被实际提交，你应该返回false。
JavaScript
JavaScript
function convertToC() {
var fTempVal = parseFloat(document.getElementById('fTemp').value);
var cTempVal = (fTempVal - 32) * (5 / 9);
document.getElementById('cTemp').value = cTempVal;
return false;
}
function convertToF() {
var cTempVal = parseFloat(document.getElementById('cTemp').value);
var fTempVal = (cTempVal * (9 / 5)) + 32;
console.log(fTempVal);
document.getElementById('fTemp').value = fTempVal;
return false;
}
HTML
HTML
<form name="conversionForm">
<table border="1">
<tbody>
<tr>
<td>Fahrenheit</td>
<td>
<input name="fTemp" id="fTemp" type="text" />
</td>
<td>
<button type="button" onclick="convertToC();return false">Convert to Celsius</button>
</td>
</tr>
<tr>
<td>Celsius</td>
<td>
<input name="cTemp" id="cTemp" type="text" />
</td>
<td>
<button type="button" onclick="convertToF();return false">Convert to Fahrenheit</button>
</td>
</tr>
</tbody>
</table>
</form>
回答by Boaz - Reinstate Monica
You are querying the DOM with the document.getElementById()function, but both inputelements don't currently have an idattribute only a nameattribute. So in your example, there are no elements that actually match the IDs you're passing to the function.
您正在使用该document.getElementById()函数查询 DOM ，但两个input元素当前都没有id属性，只有一个name属性。因此，在您的示例中，没有实际匹配您传递给函数的 ID 的元素。
You should set the idattributes of both elements like so:
您应该id像这样设置两个元素的属性：
<input id="fTemp" name="fTemp" type="text">
<input id="cTemp" name="cTemp" type="text">
