基本的javascript华氏温度/摄氏计算器 [英] Basic javascript Fahrenheit/Celsius calculator

查看:126
本文介绍了基本的javascript华氏温度/摄氏计算器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试做摄氏/华氏转换计算器,每个转换都有一个按钮,结果显示在相应的文本框中。我必须在这里忽略一些显而易见的东西......我是JavaScript的品牌,但我没有得到它。这是我迄今为止所做的:

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:

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


推荐答案

您有一些错误。请参阅此更正的 jsFiddle示例

You have a few errors. See this corrected jsFiddle example.


  1. 您的输入框缺少您尝试引用的标识 document.getElementById

  2. 您的HTML不正确地关闭。

  3. 您的按钮缺少使其成为默认提交,当你真的想要按钮时

  4. 为了防止实际提交表单,您应该返回false。

  1. Your input boxes were missing IDs that you were trying to reference with document.getElementById
  2. Your HTML was improperly closed.
  3. Your buttons were missing types which makes them default to submit when you really wanted just button
  4. To prevent the form from actually being submitted you should return false.


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

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>

这篇关于基本的javascript华氏温度/摄氏计算器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆