开始JavaScript -在内部HTML中显示温度值
开始JavaScript -在内部HTML中显示温度值
提问于 2018-09-22 06:57:21
我是一个初学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> </label>
<input type="button" id="convert" value="Convert" /><br>
</main>
<script src="convert_temp.js"></script>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2018-09-22 07:10:28
您的输出字段是<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>
Stack Overflow用户
发布于 2018-09-22 07:15:53
设置该值通常用于输入/表单元素。innerHTML通常用于div、span、td和类似元素。
degrees_computed是输入的，所以您基本上可以替换
$("degrees_computed").innerHTML =使用
$("degrees_computed").value = 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52451942
复制相关文章
相似问题