JS 函数仅适用于 2 位数值？答案

【问题标题】：JS Function only works with 2 digit values?JS 函数仅适用于 2 位数值？
【发布时间】：2019-02-12 02:10:59
【问题描述】：

我有一个 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 并将类型从华氏温度转换为摄氏温度。

【问题讨论】：

您绝对应该使用parseInt 函数将输入值变成一个int。

标签： javascript html

【解决方案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>

【讨论】：

谢谢！这似乎做到了。我对 JS 很陌生，不习惯使用动态类型语言！

【解决方案2】：

您需要使用parseInt 函数将输入值变成一个int。

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>

【讨论】：

【解决方案3】：

您可以实施的另一个快速解决方案是使用以下语法：

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

当 JS 遇到这种情况时，它会首先“看到” 0 并解释我们将使用整数，但由于 0|something 将始终为 something 它会忽略 0| 并将值设置为相等| 运算符之后的整数值。

请注意，这只会将数字字符串转换为 int，但会在混合内容上返回 0。

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

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

0| 在执行和输入方面都比parseInt 快，但功能也没有那么强大。只是在某些情况下可以考虑的替代方案。

【讨论】：