我在初级 JavaScript 类(class)中，对编程还很陌生。我正在尝试制作一个程序，根据单击的单选按钮将摄氏温度转换为华氏温度或将华氏温度转换为摄氏温度。
我觉得我已经完成了大部分工作，尽管它可能不是最优雅的代码。我无法弄清楚的一件事是为什么转换后的值不会使用 $("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> </label>
<input type="button" id="convert" value="Convert" /><br>
</main>
<script src="convert_temp.js"></script>
</body>
</html>最佳答案
您的输出字段是 <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> </label>
<input type="button" id="convert" value="Convert" /><br>
</main>
<script src="convert_temp.js"></script>
</body>
</html>关于javascript - 开始 JavaScript - 在内部 HTML 中显示温度值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52451942/