JS Function only works with 2 digit values?

Question

I have a JS function that creates a table of Celsius to Fahrenheit conversions (or vice versa).

It takes a start temperature, end temperature, and conversion type (Celcius to Fahrenheit, or Fahrenheit to Celcius). It then populates a table with conversions from start to end.

The function works correctly until the end value is 100 or over. However, if the start value is negative, it will work with end values of 100 or more.

Here's my code:

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

function conversionTable(tagID, convType, from, to) {
  var conv = document.getElementById(tagID);
  var table = document.createElement("TABLE");
  var head = table.createTHead();
  var trh = head.insertRow(0);
  
  if (convType == 'c2f') {
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Celsius</b>";
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Fahrenheit</b>";
  }
  
  if (convType == 'f2c') {
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Fahrenheit</b>";
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Celsius</b>";
  }

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

  for (var i = from; i <= to; i++) {
    var tr = table.insertRow();
    
    if (i % 2 == 0) {
      tr.setAttribute("class", "even");
    } else {
      tr.setAttribute("class", "odd");
    }
    
    var td = tr.insertCell();
    td.appendChild(document.createTextNode(i));
    var 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()
}

<form>
  <label>Start:</label><input type="number" id="start"><br>
  <label>Finish:</label><input type="number" 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="getFormData();return false;">
</form>
<div id="conversion"></div>

How can I fix this?

For testing I am using values 32,100 and conversion type Fahrenheit to Celsius.

Answer 1

Another quick solution you could implement is using the following syntax:

var/const/let integerVarName = 0|{{number string}};

When JS encounters this it will first 'see' the 0 and interpret we're going to be working with integers, but since 0|something will always be something it ignores the 0| and just sets the value equal to the integer value of whatever is after the | operator.

Note that this will only convert numeric strings to int but will return 0 on mixed content.

parseInt('2foo') // 2
0|'2foo'         // 0

parseInt(['2foo']) // 2
0|['2foo']         // 0

0| is faster than parseInt both to execute and to type but is also way less powerful. just an alternative to consider for some cases.

Answer 2

You need to parse your from and to to integers, since the string '95' is NOT less than the string '105', but the integer 95 IS less than the integer 105.

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

function conversionTable(tagID, convType, from, to) {
  var conv = document.getElementById(tagID);
  var table = document.createElement("TABLE");
  var head = table.createTHead();
  var trh = head.insertRow(0);
  
  if (convType == 'c2f') {
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Celsius</b>";
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Fahrenheit</b>";
  }
  
  if (convType == 'f2c') {
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Fahrenheit</b>";
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Celsius</b>";
  }

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

  for (var i = parseInt(from); parseInt(i) <= to; i++) {

    var tr = table.insertRow();
    
    if (i % 2 == 0) {
      tr.setAttribute("class", "even");
    } else {
      tr.setAttribute("class", "odd");
    }
    
    var td = tr.insertCell();
    td.appendChild(document.createTextNode(i));
    var 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()
}

<form>
  <label>Start:</label><input type="number" id="start"><br>
  <label>Finish:</label><input type="number" 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="getFormData();return false;">
</form>
<div id="conversion"></div>

Answer 3

You need to use parseInt function to make an int out of the input value which is string.

function getFormData() {
  var start = document.getElementById("start").value;
  var finish = parseInt(document.getElementById("finish").value);
  var conv = parseInt(document.getElementById("conv").value);
  conversionTable("conversion", conv, start, finish);
  return false;
}

function conversionTable(tagID, convType, from, to) {
  var conv = document.getElementById(tagID);
  var table = document.createElement("TABLE");
  var head = table.createTHead();
  var trh = head.insertRow(0);
  
  if (convType == 'c2f') {
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Celsius</b>";
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Fahrenheit</b>";
  }
  
  if (convType == 'f2c') {
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Fahrenheit</b>";
    var headCel = trh.insertCell();
    headCel.innerHTML = "<b>Celsius</b>";
  }

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

  for (var i = from; i <= to; i++) {
    var tr = table.insertRow();
    
    if (i % 2 == 0) {
      tr.setAttribute("class", "even");
    } else {
      tr.setAttribute("class", "odd");
    }
    
    var td = tr.insertCell();
    td.appendChild(document.createTextNode(i));
    var 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()
}

<form>
  <label>Start:</label><input type="number" id="start"><br>
  <label>Finish:</label><input type="number" 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="getFormData();return false;">
</form>
<div id="conversion"></div>