Question

我正在创建一个页面，该页面允许将温度从摄氏温度转换为华氏温度，反之亦然。用户输入起始温度，结束温度以及转换方式。

该页面当前有效，但只有一次？（我的意思是，第一次将转换结果正确打印在表格中。如果用户重新输入数据并提交表格，则只显示表格的标题，没有结果。）

这是我第一次使用JS，因此可能很明显。

不胜感激！

P.S。我希望在礼节上提出建议，但请记住我是JS菜鸟，所以要好！：）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Test</title>
    <script>

        function myFunc() {
            start = document.getElementById("start").value;
            finish = document.getElementById("finish").value;
            conv = document.getElementById("conv").value;
            conversionTable("conversion", conv, start, finish);
            return false;

        }

        function conversionTable(tagID, convType, from, to) {
            conv = document.getElementById(tagID);

            table = document.createElement("TABLE");
            head = table.createTHead();
            trh = head.insertRow(0);
            if (convType == 'c2f') {
                headCel = trh.insertCell();
                headCel.innerHTML = "<b>Celsius</b>";
                headCel = trh.insertCell();
                headCel.innerHTML = "<b>Fahrenheit</b>";
            }
            else  {
                headCel = trh.insertCell();
                headCel.innerHTML = "<b>Fahrenheit</b>";
                headCel = trh.insertCell();
                headCel.innerHTML = "<b>Celsius</b>";
            }

            conv.replaceWith(table);

            for (var i = from; i <= to; i++) {
                tr = table.insertRow();
                if (i % 2 == 0) {
                    tr.setAttribute("class", "even");
                } else {
                    tr.setAttribute("class", "odd");
                }
                td = tr.insertCell();
                td.appendChild(document.createTextNode(i));
                td = tr.insertCell();
                if (convType == 'c2f') {
                    td.appendChild(document.createTextNode(c2f(i)));
                }
                if (convType == 'f2c'){
                    td.appendChild(document.createTextNode(f2c(i)));
                }
            }
            return false;
        }

        function c2f(c) {
            let result = c * 9 / 5 + 32;
            result = (result.toFixed(1));
            return result.toString()
        }

        function f2c(f) {
            let result = ((f - 32) * (5 / 9));
            result = result.toFixed(1);
            return result.toString()
        }

    </script>
</head>
<body>
<form>
    <label>Start:</label><input type="text" id="start">
    <br><label>Finish:</label><input type="text" id="finish">
    <br><select id="conv">
        <option value="c2f">Celsius to Fahrenheit</option>
        <option value="f2c">Fahrenheit to Celsius</option>
    </select>
    <input type="submit" onclick="myFunc();return false;">
</form>
<div id="conversion"></div>
</body>
</html>

Answer 1

您正在用表替换conv。在第二次运行时，程序找不到conv，这是导致您出错的原因。请改用以下代码

conv.innerHTML="";
            conv.append(table);

function myFunc() {
            start = document.getElementById("start").value;
            finish = document.getElementById("finish").value;
            conv = document.getElementById("conv").value;
            conversionTable("conversion", conv, start, finish);
           

        }

        function conversionTable(tagID, convType, from, to) {
            conv = document.getElementById(tagID);

            table = document.createElement("TABLE");
            head = table.createTHead();
            trh = head.insertRow(0);
            if (convType == 'c2f') {
                headCel = trh.insertCell();
                headCel.innerHTML = "<b>Celsius</b>";
                headCel = trh.insertCell();
                headCel.innerHTML = "<b>Fahrenheit</b>";
            }
            else  {
                headCel = trh.insertCell();
                headCel.innerHTML = "<b>Fahrenheit</b>";
                headCel = trh.insertCell();
                headCel.innerHTML = "<b>Celsius</b>";
            }
conv.innerHTML="";
            conv.append(table);

            for (var i = from; i <= to; i++) {
                tr = table.insertRow();
                if (i % 2 == 0) {
                    tr.setAttribute("class", "even");
                } else {
                    tr.setAttribute("class", "odd");
                }
                td = tr.insertCell();
                td.appendChild(document.createTextNode(i));
                td = tr.insertCell();
                if (convType == 'c2f') {
                    td.appendChild(document.createTextNode(c2f(i)));
                }
                if (convType == 'f2c'){
                    td.appendChild(document.createTextNode(f2c(i)));
                }
            }
            return false;
        }

        function c2f(c) {
            let result = c * 9 / 5 + 32;
            result = (result.toFixed(1));
            return result.toString()
        }

        function f2c(f) {
            let result = ((f - 32) * (5 / 9));
            result = result.toFixed(1);
            return result.toString()
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Test</title>
   
</head>
<body>
<form>
    <label>Start:</label><input type="text" id="start">
    <br><label>Finish:</label><input type="text" id="finish">
    <br><select id="conv">
        <option value="c2f">Celsius to Fahrenheit</option>
        <option value="f2c">Fahrenheit to Celsius</option>
    </select>
    <input type="button" value="Submit" onclick="myFunc()">
</form>
<div id="conversion"></div>
</body>
</html>

JS功能只能使用一次

1 个答案: