显示在文本框中输入的值列表

时间:2015-07-25 16:23:06

标签: javascript

每次"转换"我想获得所有转换后的值。单击按钮。

   <!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8" />
    <title>Temperature Conversion</title>


    <style type="text/css">

    body
    {
        font: 1em calibri, arial;
    }
    button
    {
        background-color: transparent;
        margin: 5px;
        width: 300px;
    }
    h1, h2, h3, h4
    {
        text-align: center;
    }
    table
    {
        border: 8px double;
        margin-left: auto;
        margin-right: auto;
        padding: 2px;
        height: 500px;
        width: 30%;
    }
    td
    {
        border: 1px solid;
    }
    td#topcell
    {
        height: 200px;
        text-align: center; 
        vertical-align: middle;
    }
    td#midcell
    {
        height: 200px;
        text-align: center; 
        vertical-align: middle;
    }
    td#bottomcell
    {
        text-align: center; 
    }

    </style>

    <script type="text/javascript">

    function convertTemp() 
    {

        var c = document.getElementById('ctemp'), f = document.getElementById('ftemp');
        c.value = Math.round((f.value - 32) * 5 / 9);
        lblResult.innerHTML = c.value;
        document.getElementById("Fdegree").innerHTML = f.value;
        f.value = '';
                var list = [];
            var clist = [];            
                var str = document.getElementById("ftemp");
                list.push(str.value);
        clist.push(c.value);
                str.value = "";
                str.focus();
                var area = document.getElementById("txtArea");
                area.value = "";
                for (var i = 0; i < list.length; i++) {
                    area.value += list[i] + "\n";
                }
            for (var i = 0; i < clist.length; i++) {
                    area.value += clist[i] + "\n";
                }
            }
    </script>
</head>
<body>
    <main role="main">
            <table>
                <tr>
                    <td id="topcell">
                        <label for="Fahrenheit">Fahrenheit:</label>&nbsp;&nbsp;&nbsp;<input id="ftemp"><br />
                        <br />
                        <label for="Celcius">Celcius:</label>&nbsp;&nbsp;&nbsp;<input id="ctemp">&nbsp;&nbsp;&nbsp;
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        Fahrenheit&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Celcius                   
                    </td>
                </tr>
                <tr>
                    <td id="midcell">
                    <br />
                        <textarea rows="5" id="txtArea">
                        <p id="Fdegree"></p>
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td id="bottomcell">
                        <input type="button" value="Convert" onclick="convertTemp()" />

                    </td>
                </tr>
            </table>
    </main>
</body>
</html>

值应在华氏温度和摄氏温度下的中间部分逐行显示。

这是期望的结果:http://i61.tinypic.com/16atyc5.jpg

1 个答案:

答案 0 :(得分:0)

您必须动态创建TR TD并在其中包含协调数据。

jest