创建了我自己的华氏到摄氏转换器.为什么它不起作用呢?

Created my own Farenheit-to-Celsius converter. Why doesn't it work though?

本文关键字：为什么 不起作用 转换器 我自己 自己的 创建      更新时间：2023-09-26

好的，下面是代码。

HTML: 

      <input id="cel" onkeyup="conversion('celsius')"> degrees Celsius<br>
  equals<br>
  <input id="far" onkeyup="convert('farenheit')"> degrees Fahrenheit<br>

这是通过"src"属性链接到html页面的Javascript:

var celsius = document.getElementById('cel').value;
var farenheit = document.getElementById('far').value;

function conversion(celsius, farenheit){
  if (celsius == true){
    var cels2far = celsius * 1.8 + 32;
    return cels2far
  } if (farenheit == true) {
    var far2cels = (farenheit - 32) * 5/9;
    return far2cels
  }
};

我希望它在用户将数字输入文本字段后立即转换数字。我检查了几次，做了一些改变，但我不知道为什么它不起作用。

函数转换接受两个参数，您似乎希望它们都是布尔值。但是你用一个参数来调用它，这个参数总是一个字符串。

您还通过重用全局变量'celsius'和' fahrenheit '(即您在函数外部定义的变量)来重写这些名称。

另外，因为你在函数之外检索单元格的值，它们只会在页面第一次加载时被设置，然后永远不会再次更新;每次调用转换函数时都需要重新检索单元格值。

另外，当您检索任何HTML元素的"value"属性时，它将始终是一个字符串，因此您必须将其转换为数字数据类型(我下面的示例代码使用'parseFloat'函数)。

您的函数也只是返回转换的结果，当您实际需要它将结果放回HTML中时。

试试这个:

function conversion(tempType){
  var celsius = parseFloat(document.getElementById('cel').value);
  var farenheit = parseFloat(document.getElementById('far').value);
  if (tempType == 'celsius'){
    var cels2far = celsius * 1.8 + 32;
    document.getElementById('far').value = cels2far;
  }
  if (tempType == 'farenheit') {
    var far2cels = (farenheit - 32) * 5/9;
    document.getElementById('cel').value = far2cels;
  }
}

这是很多变化，但不要太消极!学习编程是一个不断尝试和犯错的过程。:)

尝试使用addEventListener而不是onkeyup=""属性，这是javascript的最佳实践。

您还可以验证用户只输入数字，但我认为此时不需要。

var celsius = document.getElementById('cel');
var farenheit = document.getElementById('far');
celsius.addEventListener("keyup", function() {
  if(!isNaN(this.value)) //<-- only numbers
    farenheit.value = (this.value * 1.8) + 32;
});
farenheit.addEventListener("keyup", function() {
  if(!isNaN(this.value))
   celsius.value = (this.value - 32) * 5/9
});
<input id="cel"> degrees Celsius<br>
equals<br>
<input id="far"> degrees Fahrenheit<br>

但是如果你仍然想使用你的代码，它需要一些调整，这里工作:

var celsius = document.getElementById('cel');
var farenheit = document.getElementById('far');
function conversion(tofarenheit){
  if (tofarenheit) {
    farenheit.value = celsius.value * 1.8 + 32;
  } else {
    celsius.value = (farenheit.value - 32) * 5/9;
  }
};
<input id="cel" onkeyup="conversion(true)"> degrees Celsius<br>
equals<br>
<input id="far" onkeyup="conversion()"> degrees Fahrenheit<br>

你必须在你的函数中获取字段值，否则它总是为空或其他默认值

function conversion(kind){
  if (kind == 'celsius'){
    var cels2far = parseFloat(document.getElementById('cel').value) * 1.8 + 32;
    return cels2far
  } if (kind == 'farenheit') {
    var far2cels = (parseFloat(document.getElementById('far').value) - 32) * 5/9;
    return far2cels
  }
};

另外，当您将字符串作为函数的第一个参数传递时，将始终设置celsius，而永远不会设置fahrenheit。所以把这个也改一下。

在javascript中进行计算时，始终确保parseFloat或parseInt。

参数设置错误。函数应该只接受一个参数所以它看起来像function conversion(type)然后条件看起来像if(type === 'celsius')另一个是else if(type === 'farenheit')

相关文章：