JS Function only works once

Question

I am creating a page that allows conversions of temperatures from Celsius to Fahrenheit or vice-versa. The user enters a start temperature, a finish temperature, and which way to convert.

The page currently works, but only once? (What I mean by this is; the first time the conversion results will be printed correctly in a table. If the user re-enters data and submits the form, it just shows the headers of the table, no results.)

This is my first time using JS, so it may be something very obvious.

Would appreciate any help!

PS I would love advice on my etiquette, but remember I'm a JS noob so be nice! :)

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

You are replacing conv with the table. On second run, the program is not able to find conv , that is the reason for your error. Use the below code instead

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 Function only works once

Question

1 answers

solution1
2 ACCPTED 2019-02-11 14:04:40

JS Function only works once

Question

1 answers

solution1 2 ACCPTED 2019-02-11 14:04:40

solution1
2 ACCPTED 2019-02-11 14:04:40