javascript - JS 函数只能处理 2 位数字？

Question

我有一个 JS 函数，可以创建摄氏温度到华氏温度的转换表(反之亦然)。

它需要开始温度、结束温度和转换类型(摄氏度到华氏度，或华氏度到摄氏度)。 然后，它会使用从开始到结束的转换来填充表格。

该函数可以正常工作，直到最终值达到 100 或以上。但是，如果起始值为负数，则它将在最终值为 100 或更大的情况下工作。

这是我的代码:

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>

我该如何解决这个问题？

为了进行测试，我使用值 32,100 和转换类型华氏温度到摄氏度。

Answer 1

您需要将 from 和 to 解析为整数，因为字符串“95”不小于字符串“105”，但整数 95 小于比整数 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>