使用Javascript函数的HTML中的基本温度转换器

Question

我无法使这个基本的HTML温度转换器工作。基本上，用户在框中输入＆＃34; tempinput＆＃34;温度并选择输入是否为C / F / K.

一旦完成，用户点击转换并运行convert（）函数，显示在框中＆＃34;结果＆＃34;另外两个选择的温度（所以如果选择了C，F和K将显示在框中）。

问题是，虽然它是一个简单的程序而且一切看起来都很简单，但它似乎并没有起作用。我一直在努力弄清楚什么是无效的。

以下是代码：

＆＃13;

＆＃13;

function convert() {
    var temp = document.getElementById("initialtemp");
    var valueSelected = temp.options[options.selectedIndex].value;

    if (valueSelected == "c") {
      var convertedF = cToF();
      var convertedK = cToK();

      return document.getElementById("result").innerHTML = convertedF + "F" + " = " + convertedK + "K";
    } else if (valueSelected == "f") {
      var convertedC = fToC();
      var convertedK = fToK();

      return document.getElementById("result").innerHTML = convertedC + "C" + " = " + convertedK + "K";
    } else if (valueSelected == "k") {
      var convertedF = kToF();
      var convertedC = kToC();

      return document.getElementById("result").innerHTML = convertedF + "F" + " = " + convertedC + "C";
    }
  }
  // celcius to rest

function cToF() {
  var c = document.getElementById("tempinput").value;
  return (c * 9 / 5) + 32;
}

function cToK() {
    var c = document.getElementById("tempinput").value;
    return c + 273.15;
  }
  // fahrenheit to rest

function fToC() {
  var f = document.getElementById("tempinput").value;
  return (f - 32) * 5 / 9;
}

function fToK() {
    var f = document.getElementById("tempinput").value;
    return (f - 32) * 5 / 9 + 273.15;
  }
  // kelvin to rest

function kToC() {
  var k = document.getElementById("tempinput").value;
  return k - 273.15;
}

function kToF() {
  var k = document.getElementById("tempinput").value;
  return (k - 273.15) * 9 / 5 + 32;
}

＆＃13;

<h1>Temperature Converter</h1>
<div>
  <h2>Celcius: "C" Fahrenheit: "F" Kelvin: "K"</h2>
  Temperature:
  <input type="text" id="tempinput">
  <select size="3" id="initialtemp">
    <option value="c" selected>C
      <option value="f">F
        <option value="k">K
  </select>
  <br>
  <br>Result:
  <input type="text" id="result">
  <button type="button" onclick="convert()">Convert</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

HTML

您的选项需要结束标记。

<option value="c" selected>C</option>
<option value="f">F</option>
<option value="k">K</option>

JS

为了获得select元素的值，你必须使用.value属性。

var valueSelected = document.getElementById("initialtemp").value;

最后，为了使用生成的字符串更新输出元素，您必须使用.value属性而不是.innerHTML属性。

document.getElementById("result").value = convertedF + "F" + " = " + convertedK + "K";

Answer 2

修复后的代码

＆＃13;

＆＃13;

function convert() {
    var temp = document.getElementById("initialtemp");
    var valueSelected = temp.value;

    if (valueSelected == "c") {
      var convertedF = cToF();
      var convertedK = cToK();

      return document.getElementById("result").value = convertedF + "F" + " = " + convertedK + "K";
    } else if (valueSelected == "f") {
      var convertedC = fToC();
      var convertedK = fToK();

      return document.getElementById("result").value = convertedC + "C" + " = " + convertedK + "K";
    } else if (valueSelected == "k") {
      var convertedF = kToF();
      var convertedC = kToC();

      return document.getElementById("result").value = convertedF + "F" + " = " + convertedC + "C";
    }
  }
  // celcius to rest

function cToF() {
  var c = document.getElementById("tempinput").value;
  return (c * 9 / 5) + 32;
}

function cToK() {
    var c = document.getElementById("tempinput").value;
    return c + 273.15;
  }
  // fahrenheit to rest

function fToC() {
  var f = document.getElementById("tempinput").value;
  return (f - 32) * 5 / 9;
}

function fToK() {
    var f = document.getElementById("tempinput").value;
    return (f - 32) * 5 / 9 + 273.15;
  }
  // kelvin to rest

function kToC() {
  var k = document.getElementById("tempinput").value;
  return k - 273.15;
}

function kToF() {
  var k = document.getElementById("tempinput").value;
  return (k - 273.15) * 9 / 5 + 32;
}

＆＃13;

<h1>Temperature Converter</h1>
<div>
  <h2>Celcius: "C" Fahrenheit: "F" Kelvin: "K"</h2>
  Temperature:
  <input type="text" id="tempinput" />
  <select size="3" id="initialtemp">
    <option value="c" selected>C</option>
    <option value="f">F</option>
    <option value="k">K</option>
  </select>
  <br/>
  <br/>Result:
  <input type="text" id="result"/>
  <button type="button" onclick="convert()">Convert</button>
</div>

＆＃13;

＆＃13;

＆＃13;