Question

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

我觉得我花了很多时间，尽管它可能不是最优雅的代码。我不知道的一件事是为什么使用ID LEVEL COUNT 1 10 3 1 30 2 1 20 2 1 30 3无法显示转换后的值。

我想念什么？为什么不显示转换后的值？

$("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();
};

Answer 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>

Answer 2

您不应将 innerHTML 用于<input>标签，而应使用 value 由于您使用的是jquery，因此也可以使用$（“ degrees_computed”）。val（myResultVariable）

如果结果html标记是<a> <div> <span> <label>或<input>或<img>等元素以外的其他标记，则可以与innerHTML一起使用

Answer 3

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

输入

degrees_computed，因此您基本上可以替换

$("degrees_computed").innerHTML =

使用

$("degrees_computed").value =

开始使用JavaScript-以内部HTML显示温度值

3 个答案: