开始 JavaScript - 在内部 HTML 中显示温度值答案

【问题标题】：Beginning JavaScript - displaying temperature value in Inner HTML开始 JavaScript - 在内部 HTML 中显示温度值
【发布时间】：2018-09-21 22:57:20
【问题描述】：

我正在学习 JavaScript 课程，并且对编程非常陌生。我正在尝试制作一个程序，根据单击的单选按钮将摄氏温度转换为华氏温度或将华氏温度转换为摄氏温度。

我觉得我已经完成了大部分工作，尽管它可能不是最优雅的代码。我无法弄清楚的一件事是为什么转换后的值不会使用$("degrees_computed").innerHTML 显示。

我错过了什么？为什么转换后的值不显示？

"use strict";
var $ = function(id) {
  return document.getElementById(id);
};

var toFahrenheit = function() {
  if ($("to_fahrenheit").checked) {
    $("degree_label_1").innerHTML = "Enter C degrees:";
    $("degree_label_2").innerHTML = "Degrees Fahrenheit:";
  }
  clearTextBoxes();
}
var toCelsius = function() {
  if ($("to_celsius").checked) {
    $("degree_label_1").innerHTML = "Enter F degrees:";
    $("degree_label_2").innerHTML = "Degrees Celsius:";
  }
  clearTextBoxes();
}
var convertTemp = function() {
  var fahrenheit;
  var celsius;

  if ($("to_fahrenheit").checked) {
    celsius = $("degrees_entered").value;
    celsius = (celsius * (9 / 5)) + 32;
    celsius = parseFloat(celsius);
    celsius = celsius.toFixed(0);
    $("degrees_computed").innerHTML = celsius;
  }

  if ($("to_celsius").checked) {
    fahrenheit = $("degrees_entered").value;
    fahrenheit = parseFloat(fahrenheit);
    fahrenheit = (fahrenheit - 32) * (5 / 9);
    fahrenheit = fahrenheit.toFixed(0);
    $("degrees_computed").disabled = false;
    $("degrees_computed").innerHTML = fahrenheit;
  }
}

var clearTextBoxes = function() {
  $("degrees_entered").value = "";
  $("degrees_computed").value = "";
};

window.onload = function() {
  $("convert").onclick = convertTemp;
  $("to_celsius").onclick = toCelsius;
  $("to_fahrenheit").onclick = toFahrenheit;
  $("degrees_entered").focus();
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Temperature Converter</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <main>
    <h1>Temperature Converter</h1>
    <input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to Celsius<br>
    <input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit<br><br>
    <label id="degree_label_1">Enter F degrees:</label>
    <input type="text" id="degrees_entered"><br>
    <label id="degree_label_2">Degrees Celsius:</label>
    <input type="text" id="degrees_computed" disabled><br>
    <label>&nbsp;</label>
    <input type="button" id="convert" value="Convert" /><br>
  </main>
  <script src="convert_temp.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

您的输出字段是<input> 元素。要填写它们，您必须分配给.value，而不是.innerHTML。

"use strict";
var $ = function(id) {
  return document.getElementById(id);
};

var toFahrenheit = function() {
  if ($("to_fahrenheit").checked) {
    $("degree_label_1").innerHTML = "Enter C degrees:";
    $("degree_label_2").innerHTML = "Degrees Fahrenheit:";
  }
  clearTextBoxes();
}
var toCelsius = function() {
  if ($("to_celsius").checked) {
    $("degree_label_1").innerHTML = "Enter F degrees:";
    $("degree_label_2").innerHTML = "Degrees Celsius:";
  }
  clearTextBoxes();
}
var convertTemp = function() {
  var fahrenheit;
  var celsius;

  if ($("to_fahrenheit").checked) {
    celsius = $("degrees_entered").value;
    celsius = (celsius * (9 / 5)) + 32;
    celsius = parseFloat(celsius);
    celsius = celsius.toFixed(0);
    $("degrees_computed").value = celsius;
  }

  if ($("to_celsius").checked) {
    fahrenheit = $("degrees_entered").value;
    fahrenheit = parseFloat(fahrenheit);
    fahrenheit = (fahrenheit - 32) * (5 / 9);
    fahrenheit = fahrenheit.toFixed(0);
    $("degrees_computed").disabled = false;
    $("degrees_computed").value = fahrenheit;
  }
}

var clearTextBoxes = function() {
  $("degrees_entered").value = "";
  $("degrees_computed").value = "";
};

window.onload = function() {
  $("convert").onclick = convertTemp;
  $("to_celsius").onclick = toCelsius;
  $("to_fahrenheit").onclick = toFahrenheit;
  $("degrees_entered").focus();
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Temperature Converter</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <main>
    <h1>Temperature Converter</h1>
    <input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to Celsius<br>
    <input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit<br><br>
    <label id="degree_label_1">Enter F degrees:</label>
    <input type="text" id="degrees_entered"><br>
    <label id="degree_label_2">Degrees Celsius:</label>
    <input type="text" id="degrees_computed" disabled><br>
    <label>&nbsp;</label>
    <input type="button" id="convert" value="Convert" /><br>
  </main>
  <script src="convert_temp.js"></script>
</body>

</html>

【讨论】：

【解决方案2】：

<input> 标签不应使用 innerHTML，而应使用 value 由于您使用的是 jquery，您还可以使用 $("degrees_computed").val(myResultVariable)

如果您的结果 html 标记是 <a> <div> <span> <label> 或除 <input> 或 <img> 等元素之外的任何其他标记，则可以使用 innerHTML

【讨论】：

非常感谢。我最终使用了.value，但也尝试了你提到的另一种方式。两种方式都使我的程序成功运行。谢谢！

【解决方案3】：

设置值通常用于输入/表单元素。 innerHTML 通常用于 div、span、td 和类似元素。

degrees_computed 是输入，所以你基本上替换

$("degrees_computed").innerHTML =

与

$("degrees_computed").value =

【讨论】：

非常感谢。这很有意义。它现在按我想要的方式工作。