基本的JavaScript华氏/摄氏计算器(Basic javascript Fahrenheit/

我试图做一个摄氏/华氏转换计算器，用一个按钮，每一个转换，并将结果显示在相应的文本框中。我必须失去了一些东西明显在这里......我的品牌新的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>

Answer 1:

你有几个错误。看到这个修正的jsfiddle例子 。

您输入框不翼而飞，你试图用参考编号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>

Answer 2:

要查询与DOM中document.getElementById()函数，但两者input元素，但目前没有一个id属性只是一个name的属性。所以，在你的榜样，没有实际匹配你传递给函数的标识元素。

你应该设置id ，像这样两个元素的属性：

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

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

文章来源: Basic javascript Fahrenheit/Celsius calculator

基本的JavaScript华氏/摄氏计算器(Basic javascript Fahrenheit/

Answer 1:

Answer 2:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮