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

您需要使用parseInt函数从输入值（字符串）中得出一个整数。

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>

Answer 2

您需要将from和to解析为整数，因为字符串'95'不小于字符串'105'，而是整数95 IS小于整数105。< / p>

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

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

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快，但功能却不那么强大。只是在某些情况下要考虑的另一种选择。

JS函数仅适用于2位数的值？

3 个答案: