Converthing Celcius/Fahrenheit with Select Menu

Question

I want to convert, with Select menu. So the first input box will read what temperature to convert from Select Menu, But it didn't work. When I select menu Celsius so the input will read the temperature as Celsius.

function myFunction() {
  if (document.getElementById("temperature").value == "Celcius") {
    convertc();
  } else {
    convertf();
  }
}

function convertc() {
  var x;
  document.getElementById("demo").innerHTML = " Degree Celcius ";
  x = (document.getElementById("c").value - 32) * 5 / 9;
  document.getElementById("f").value = Math.round(x);
}

function convertf() {
  var x;
  document.getElementById("demo").innerHTML = " Degree Fahrenheit ";
  x = document.getElementById("c").value * 9 / 5 + 32;
  document.getElementById("f").value = Math.round(x);
}

<h2>JavaScript Celcius to Fahrenhet</h2>
<form>
  <select id="temperature" onchange="myFunction()">
             <option value="Celcius">Celcius</option>
             <option value="Fahrenheit">Fahrenheit</option>
         </select>
</form>
<p>
  <input id="c"><span id="demo"> Degree </span></p>
<p>
  <input id="f"></p>

You have a stray `"` (double-quote) in your second `` tag. – Mr. Polywhirl Dec 18 '17 at 19:05 — Mr. Polywhirl, Dec 18 '17 at 19:05
Thanks, But still can't read my input and convert it – dalla dirosa Dec 18 '17 at 19:13 — dalla dirosa, Dec 18 '17 at 19:13

sumeet kumar · Answer 1 · 2017-12-18T19:08:58.423

You have multiple selector wrong in your Html as it has spaces on the ID's and in JavaScript selector you don't have space. Just fix spaces in your elements ID's and it will work

e.g. "demo " != "demo"

Below is corrected ID's and JavaScript Selectors

function myFunction() {
    if (document.getElementById("temperature").value == "Celcius") {
        convertc();

    } else {
        convertf();
    }
}

function convertc() {
    var x;
    document.getElementById("demo").innerHTML = " Degree Celcius ";
    x = (document.getElementById("c").value - 32) * 5 / 9;
    document.getElementById("f").value = Math.round(x);
}

function convertf() {
    var x;
    document.getElementById("demo").innerHTML = " Degree Fahrenheit ";
    x = document.getElementById("c").value * 9 / 5 + 32;
    document.getElementById("f").value = Math.round(x);
}

<body>
   <h2>JavaScript Celcius to Fahrenhet</h2>
   <form>
     <select id="temperature" onchange="myFunction()">
         <option value="Celcius">Celcius</option>
         <option value="Fahrenheit">Fahrenheit</option>
     </select>
   </form>
   <p>
     <input id="c"><span id="demo"> Degree </span></p>
   <p>
     <input id="f" ></p>
</body>

Mr. Polywhirl · Answer 2 · 2017-12-19T12:23:02.697

If you want to automatically select the first select option, you will need to trigger the event.

Note: For the trigger functionality, I reused logic from a previous answer of mine.

I also converted the calculations to lambda constants for brevity, see below.

const FAHRENHEIT_TO_CELSIUS = (value) => (value - 32) * 5 / 9;
const CELSIUS_TO_FAHRENHEIT = (value) => value * 9 / 5 + 32;
// ==============================================================
var comboEl = document.getElementById('temperature');
addEventListener(comboEl, 'change', onComboChange); // Add an event listener.
triggerEvent(comboEl, 'change', {}); // Automatically trigger the event.
// ==============================================================
function onComboChange(e) {
  var inputValue = document.getElementById('input-degrees').value;
  if (e.target.value === 'Celsius') {
    updateDisplay('Celsius', CELSIUS_TO_FAHRENHEIT(inputValue));
  } else {
    updateDisplay('Fahrenheit', FAHRENHEIT_TO_CELSIUS(inputValue));
  }
}
function updateDisplay(label, value) {
  document.getElementById('degrees-label').innerHTML = 'Degrees ' + label;
  document.getElementById('output-degrees').value = Math.round(value);
}
// ==============================================================
function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function() {
      handler.call(el);
    });
  }
}
function triggerEvent(el, eventName, options) {
  var event;
  if (window.CustomEvent) {
    event = new CustomEvent(eventName, options);
  } else {
    event = document.createEvent('CustomEvent');
    event.initCustomEvent(eventName, true, true, options);
  }
  el.dispatchEvent(event);
}

<h2>JavaScript Celsius to Fahrenheit</h2>
<form>
  <select id="temperature">
       <option value="Celsius">Celcius</option>
       <option value="Fahrenheit">Fahrenheit</option>
   </select>
</form>
<p>
  <input id="input-degrees" value="0" />
  <span id="degrees-label">Degrees</span>
</p>
<p><input id="output-degrees" /></p>

Converthing Celcius/Fahrenheit with Select Menu

2 Answers2