Menu
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!
P.S. 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>
460
asked Jul 20 '26 23:07
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
