Question

我试图在此代码中添加一个函数以转换为Kelvin，看来我做不到。摄氏温度到华氏温度的效果很好，我想我应该从简单地开始，只需指定华氏温度到开尔文。

function convert(degree) {
  var x;
  if (degree == "C") {
    x = document.getElementById("c").value * 9 / 5 + 32;
    document.getElementById("f").value = Math.round(x);
  } else {
    x = (document.getElementById("f").value - 32) * 5 / 9;
    document.getElementById("c").value = Math.round(x);
  } else if {
    x = (document.getElementById("f").value - 32) * 5 / 9 + 273.15;
    document.getElementById("k").value = Math.round(x);
  }
}

<!DOCTYPE html>
<html>

<body>

  <h2>JavaScript Celcius to Fahrenhet</h2>

  <p>Insert a number into one of the input fields below:</p>

  <p><input id="c" onkeyup="convert('C')"> degrees Celsius</p>

  <p><input id="f" onkeyup="convert('F')"> degrees Fahrenheit</p>

  <p><input id="k" onkeyup="convert('K')"> degrees Kelvin</p>

  <p>Note that the <b>Math.round()</b> method is used, so that the result will be returned as an integer.</p>

</body>

</html>

从美学上讲，一切都一样，但是当我为开尔文添加“ else”时功能会丢失

Answer 1

您的if / else结构错误，应该看起来像这样：

function convert(degree) {
      if (degree === 'C') {
        let x = (document.getElementById('c').value * 9) / 5 + 32;
        document.getElementById('f').value = Math.round(x);
      } else if (degree === 'F') {
        let x = ((document.getElementById('f').value - 32) * 5) / 9;
        document.getElementById('c').value = Math.round(x);
      } else {
        let x = ((document.getElementById('f').value - 32) * 5) / 9 + 273.15;
        document.getElementById('k').value = Math.round(x);
      }
    }

但是，通过编写此函数的方式，如果您在Celsius输入中键入内容，则会显示等效的华氏温度，反之亦然，但不会同时更新Kelvin输入。此外，在华氏输入上进行任何输入之前在开尔文输入上键入将无法正常工作，因为它将使用空值""进行计算。

这可能是解决方案之一：

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Celcius to Fahrenhet</h2>

    <p>Insert a number into one of the input fields below:</p>

    <p><input id="c" onkeyup="convert('C')" /> degrees Celsius</p>

    <p><input id="f" onkeyup="convert('F')" /> degrees Fahrenheit</p>

    <p><input id="k" onkeyup="convert('K')" /> degrees Kelvin</p>

    <p>Note that the <b>Math.round()</b> method is used, so that the result will be returned as an integer.</p>
  </body>
  <script>
    function convert(degree) {
      if (degree === 'C') {
        document.getElementById('f').value = CelsiusToFahrenheit();
        document.getElementById('k').value = CelsiusToKelvin();
      } else if (degree === 'F') {
        document.getElementById('c').value = FahrenheitToCelsius();
        document.getElementById('k').value = FahrenheitToKelvin();
      } else {
        document.getElementById('f').value = KelvinToFahrenheit();
        document.getElementById('c').value = KelvinToCelsius();
      }
    }

    function CelsiusToFahrenheit() {
      const celsius = Number(document.getElementById('c').value);
      return Math.round((celsius * 9) / 5 + 32);
    }

    function CelsiusToKelvin() {
      const celsius = Number(document.getElementById('c').value);
      return Math.round(celsius + 273.15);
    }

    function FahrenheitToCelsius() {
      const fahrenheit = Number(document.getElementById('f').value);
      return Math.round(((fahrenheit - 32) * 5) / 9);
    }

    function FahrenheitToKelvin() {
      const fahrenheit = Number(document.getElementById('f').value);
      return Math.round(((fahrenheit - 32) * 5) / 9 + 273.15);
    }

    function KelvinToCelsius() {
      const kelvin = Number(document.getElementById('k').value);
      return Math.round(kelvin - 273.15);
    }

    function KelvinToFahrenheit() {
      const kelvin = Number(document.getElementById('k').value);
      return Math.round(((kelvin - 273.15) * 9) / 5 + 32);
    }
  </script>
</html>

我所做的是创建了一堆帮助函数，该函数仅处理数学运算以将一个测量转换为另一测量，同时还使用Number()将输入值转换为数字，否则每当使用该输入的第一个操作时是一个补充，javascript只会连接值，因为输入值是字符串，结果类似

"2" + 1
// "21"

有了额外的功能，我们可以使convert(degree)保持整洁，让它只担心更新字段，而其他函数进行计算。这样，只需调用convert(degree)内部的相应函数并将其返回值分配给相应的输入，就更容易更新其他两个字段。

Answer 2

您的 if-else 结构在语法上不正确。您不能没有条件的if。另外，在else块之后不能再有另一个else。您必须在除最后一个块之外的所有块上使用else if (something)，后者可以仅为else。

您有：

if (degree == "C") {
} else {
} else if {
}

更改为这种结构：

if (degree == "C") {
  // handle C here
} else if (degree == "F") {
  // handle F here
} else if (degree == "K") {
  // handle K here
} else {
  // throw exception here because of an unsupported value for `degree`
}

Answer 3

您未指定if条件。您只是无条件跳到else，然后跳到else if。另外，在原始代码中，您不会更新所有字段，而只是更新C和F。

那我做了什么：

修复if-else结构。
更新了每个学位字段的正确值。

您只需要更新转换的值，因为我不知道其背后的数学原理。

应该是这样的：

function convert(degree) {
  var x;
  if (degree == "C") {
    c_to_f = document.getElementById("c").value * 9 / 5 + 32;
    document.getElementById("f").value = Math.round(c_to_f);
    c_to_k = 0; //update it
    document.getElementById("k").value = c_to_k;
  } else if (degree == "F") {
    f_to_c = (document.getElementById("f").value - 32) * 5 / 9;
    document.getElementById("c").value = Math.round(f_to_c);
    f_to_k = 0; //update it
    document.getElementById("k").value = f_to_k;
  } else {
    k_to_f = (document.getElementById("k").value - 32) * 5 / 9 + 273.15;
    document.getElementById("f").value = Math.round(k_to_f);
    k_to_c = 0; //update it
    document.getElementById("c").value = k_to_c;
  }
}

<!DOCTYPE html>
<html>

<body>

  <h2>JavaScript Celcius to Fahrenhet</h2>

  <p>Insert a number into one of the input fields below:</p>

  <p><input id="c" onkeyup="convert('C')"> degrees Celsius</p>

  <p><input id="f" onkeyup="convert('F')"> degrees Fahrenheit</p>

  <p><input id="k" onkeyup="convert('K')"> degrees Kelvin</p>

  <p>Note that the <b>Math.round()</b> method is used, so that the result will be returned as an integer.</p>

</body>

</html>

Answer 4

您可以使用开关盒来避免多个if / else。如果您避免使用多个变量k,K, c,C, f,F，那么代码将变得更好，也不会造成混乱。描述性变量名称总是更好。输入您的输入内容。

function convert(inputId) {
  // You might want to ensure your input is number by changing its type to number.
  const currentValue = document.getElementById(inputId).value; 
  switch (inputId) {
    case 'celsius':
      // do celsius conversion here;
      break;

    case 'fahrenheit':
      // do fahrenheit conversion here;
      break;
    case 'kelvin':
      // do kelvin conversion here;
      break;

    default:
      break;
  }
}

HTML

<!DOCTYPE html>
<html>

<body>

  <h2>JavaScript Celcius to Fahrenhet</h2>

  <p>Insert a number into one of the input fields below:</p>

  <p><input type="number" id="celcius" onkeyup="convert('celcius')"> degrees Celsius</p>

  <p><input type="number" id="fahrenheit" onkeyup="convert('fahrenheit')"> degrees Fahrenheit</p>

  <p><input type="number" id="kelvin" onkeyup="convert('kelvin')"> degrees Kelvin</p>

  <p>Note that the <b>Math.round()</b> method is used, so that the result will be returned as an integer.</p>

</body>

</html>

添加功能/其他

4 个答案: