CODEWITHSUNDEEP
javascripthtml
Carl
Carl

Reputation: 5779

Simple conversion of temperature program

I have a program that converts temperature, but for some reason I can't figure out why the result isn't printing out when I click my button. Any help would be appreciated. Here is my code:

var report = function(celsius, fahrenheit) {
  document.getElementById("result").innerHTML = (celsius + "\xbOF="
    fahrenheit + "\xbOF");
};
document.getElementById("f_to_c").onclick = function() {
  var f = document.getElementById("temperature").value;
  report((f - 32) / 1.8, f);
};
document.getElementById("c_to_f").onclick = function() {
  var c = document.getElementById("temperature").value;
  report(c, 1.8 * c + 32);
};
<title>HW problem 3</title>
  <h1>Temperature Conversion</h1>
  <p>
    <input type="number" id="temperature" />
    <button id="f_to_c">F to C</button>
    <button id="c_to_f">C to F</button>

  </p>
  <p id="result"></p>

I apologize for asking a basic question. I have another script that calculates tip and it works fine, so I can't figure out what isn't working here. Thanks

Upvotes: 1

Views: 698

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

Aside from the missing plus sign in your report function, the escape strings for your degree (°) sign need to be capitalized in order to work properly (i.e. \xB0 instead of \xb0). Here is a working example:

var report = function(celsius, fahrenheit) {
  document.getElementById("result").innerHTML = (celsius + "\xB0C = " + fahrenheit + "\xB0F");
};
document.getElementById("f_to_c").onclick = function() {
  var f = document.getElementById("temperature").value;
  report((f - 32) / 1.8, f);
};
document.getElementById("c_to_f").onclick = function() {
  var c = document.getElementById("temperature").value;
  report(c, 1.8 * c + 32);
};
<title>HW problem 3</title>
  <h1>Temperature Conversion</h1>
  <p>
    <input type="number" id="temperature" />
    <button id="f_to_c">F to C</button>
    <button id="c_to_f">C to F</button>

  </p>
  <p id="result"></p>

Upvotes: 2

Related Questions