Celsius to Fahrenheit conversion- JavaScript

Question

I'm making Celcius to Farenheit calculater. My codepen is here: https://codepen.io/j9k9/pen/zBZJQL I'm trying to make it so that if the celcius input is active, the convert to farenheit function is called and vice versa and for the conversion to happen only when the submit button is clicked. I also tried an if/else statement for the active form id which did not work.

Code is as follows:

HTML:

<html>
    <head>
        <meta charset="UTF-8">
        <title>Temperature Converter - Part 1</title>
    </head>
    <body>
        <h1>Temperature Converter</h1>
        <div id="inputs">
            <input id="cInput" placeholder="celcius"/>
            <input id="fInput" placeholder="farenheit"/>
        </div>
        <button id="submit">Convert</button>
        <h1 id="result">Result:</h1>
        <script src="js/index.js"></script>
    </body>
</html>

JS:

document.getElementById("cInput").oninput = function() {convertCToF()};
document.getElementById("fInput").oninput = function() {convertFToC()};

function convertCToF() {
  var c = document.querySelector("#cInput").value;
  var f = c * (9 / 5) + 32;

  c = parseInt(c);
  f = parseInt(f);

  document.querySelector("#result").innerHTML = ("Result: ") + f + (" \u2109");
}

document.querySelector("#submit").onclick = convertCToF;

function convertFToC() {
  var f = document.querySelector("#fInput").value;
  var c = (f - 32) * 5 / 9;

  c = parseInt(c);
  f = parseInt(f);

  document.querySelector("#result").innerHTML = ("Result: ") + c + (" \u2103");
}

document.querySelector("#submit").onclick = convertFToC;

The problem is when you click submit, both input fields lose focus and it's the button that is "active". You'd need to listen for `onfocus` for each of the inputs and take note which input was clicked last. — Emissary, Aug 15 '16 at 09:14

score 0 · Answer 1 · edited May 23 '17 at 10:33

I had corrected your code-pen and noted as to where, why and what could be improved but someone appears to have deleted my comment. As there isn't a concrete answer yet I'll transfer it here.

Remove these two lines if you don't want it to update on the fly:

document.getElementById("cInput").oninput = function() {convertCToF()};
document.getElementById("fInput").oninput = function() {convertFToC()};

Instead decide which "mode" of conversion the script will run based on the last input box used.

var conversionFn;
document.querySelector('#cInput').onfocus = function(){
    conversionFn = convertCToF;
};
document.querySelector('#fInput').onfocus = function(){
    conversionFn = convertFToC; 
};

Note: that in your conversion functions the following lines are useless (remove them).

c = parseInt(c);
f = parseInt(f);

When used in expressions, variables will be coerced to a Number where appropriate - where you wish to be explicit you should do this conversion before you perform a calculation with the value.

» see also: Javascript Unary Operator as another example of this.

Next setup a listener for your button, note that you cannot simply attach the conversionFn to the event handler itself as this will assign a single unchanging reference (or undefined) immediately which is of no use - instead, encapsulate the variable in the scope of a new function closure.

document.querySelector('#submit').onclick = function(){
    conversionFn();  
};

score 0 · Answer 2 · edited Oct 22 '19 at 18:43

0

Please use these functions instead.

function getFahrenheitFromCelsius(celsius){
   return (celsius * (9 / 5)) + 32;
}

function getCelsiusFromFahrenheit(fahrenheit){
   return (fahrenheit - 32) * (5 / 9);
}

edited Oct 22 '19 at 18:43

nbk

45,398
8
30
47

answered Oct 22 '19 at 10:14

Israel

1,165
11
11

Praveen Prasad · Answer 3 · 2016-08-15T09:29:35.080

https://codepen.io/anon/pen/mEvzOV

I have written this just for your demo

function getElm(id){
  return document.getElementById(id);
}

function readValue(id){
  return getElm(id).value;
}

function updateHtml(text,id){
  getElm(id).innerHTML  = text;
}


function convertCToF(c) {
  var f = c * (9 / 5) + 32;
  return f;
}

function convertFToC(f) {
  var c = (f - 32) * 5 / 9;
  return c;
}

function sequnce(){
  var val =  readValue(activeId);
  var convertedVal = activeFn(val);
  updateHtml("Result: "+ convertedVal + activeSuffix,'result')
}

var activeFn = convertCToF;
var activeId = 'cInput';
var activeSuffix = "℉"

getElm('cInput').onfocus = function(){
  activeFn = convertCToF;
  activeId = 'cInput';
  activeSuffix = "℉"
}

getElm('fInput').onfocus  = function(){
  activeFn = convertCToF;
  activeId = 'fInput';
  activeSuffix = "℃"
}

getElm("cInput").oninput = sequnce;
getElm("fInput").oninput = sequnce;
getElm("submit").oninput = sequnce;

Celsius to Fahrenheit conversion- JavaScript

3 Answers3