Beginning JavaScript - displaying temperature value in Inner HTML

前端未结

关注

 3  971

I am in a beginning JavaScript class and very new to programming. I am attempting to make a program that converts Celsius to Fahrenheit or Fahrenheit to Celsius depending on whi

相关标签:

3条回答

予麋鹿

2021-01-22 04:20

You should not use innerHTML for <input> tags, instead use value Since you are using jquery you could also use $("degrees_computed").val(myResultVariable)

Could be working with innerHTML if your result html tag was a <a> <div> <span> <label> or any other tag than elements like <input> or <img>

0 讨论(0)
发布评论:

提交评论
- 加载中...

清酒与你

2021-01-22 04:35

Your output fields are <input> elements. To fill them in you must assign to .value, not .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>

0 讨论(0)

难免孤独

2021-01-22 04:40
Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.

degrees_computed is input so you basically replace
```
$("degrees_computed").innerHTML =
```
with
```
$("degrees_computed").value = 
```
0 讨论(0)
发布评论:

提交评论
- 加载中...