基本javascript华氏/摄氏计算器_Javascript_Html_Forms

基本javascript华氏/摄氏计算器

javascript html forms

基本javascript华氏/摄氏计算器,javascript,html,forms,Javascript,Html,Forms,我正在尝试做一个摄氏/华氏转换计算器，每个转换都有一个按钮，结果显示在相应的文本框中。我一定错过了一些明显的东西。。。我是javascript的新手，只是不懂而已。以下是我迄今为止所做的工作： <!DOCTYPE html> <html> <head> <meta charset = "utf-8"/> <title>Convert Fahrenheit and Celsius</titl

我正在尝试做一个摄氏/华氏转换计算器，每个转换都有一个按钮，结果显示在相应的文本框中。我一定错过了一些明显的东西。。。我是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>


将华氏温度和摄氏温度换算
华氏的
换算成摄氏度
摄氏度
换算成华氏温度

您正在使用该函数查询DOM，但两个

输入

元素当前都没有

id

属性，只有

名称

属性。因此，在您的示例中，没有与传递给函数的ID实际匹配的元素

您应该设置这两个元素的

id

属性，如下所示：

<input id="fTemp" name="fTemp" type="text">

<input id="cTemp" name="cTemp" type="text">

您有一些错误。请参见已更正的

您的输入框缺少您试图使用

document.getElementById

您的HTML未正确关闭

您的按钮缺少类型，这使得它们在您真正需要的时候只是一个按钮

为了防止表单实际提交，您应该返回false

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

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


华氏的
换算成摄氏度
摄氏度
换算成华氏温度

那么问题出在哪里？要么它没有进行计算，要么它只是没有在文本框中显示它。。。不知道是哪个。或者两者兼而有之？