开始 JavaScript - 在内部 HTML 中显示温度值
[英]Beginning JavaScript - displaying temperature value in Inner HTML
问题描述
我正在学习 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>
3 个解决方案
解决方案1
1 2018-09-21 23:10:27
您的输出字段是<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>
解决方案2
0 2018-09-21 23:11:35
你不应该为<input>标签使用innerHTML ，而是使用value因为你使用 jquery 你也可以使用 $("degrees_computed").val(myResultVariable)
如果您的结果 html 标记是<a> <div> <span> <label>或除<input>或<img>等元素之外的任何其他标记，则可以使用 innerHTML
解决方案3
0 2018-09-21 23:15:53
设置值通常用于输入/表单元素。 innerHTML 通常用于 div、span、td 和类似元素。
degree_computed 是输入，因此您基本上可以替换
$("degrees_computed").innerHTML =
和
$("degrees_computed").value =
如何使用 css 和 javascript 在 html 中制作温度选择器？
[英]How to make a temperature selector in html with css and javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.