parseFloat returns NaN in one part of code but works fine in other

I'm creating a temperature converter between Celsius, Fahrenheit, and Kelvin. The Celsius part work but the Fahrenheit doesn't.

I'm using parseFloat to turn the string into a number to be able to do the math but it doesn't seem to work for Fahrenheit. Is there anything I'm doing wrong? This is all of the javascript I have right now:

const celsiusInput = document.querySelector('#celsius > input');
const fahrenheitInput = document.querySelector('#fahrenheit > input');
const kelvinInput = document.querySelector('#kelvin > input');


function cToFandK() {
  const cTemp = parseFloat(celsiusInput.value);
  const fTemp = (cTemp * (9/5)) + 32;
  const kTemp = cTemp + 273.15;
  fahrenheitInput.value = fTemp;
  kelvinInput.value = kTemp;

  console.log(cTemp);
  console.log(fTemp);
  console.log(kTemp); // these work
}

function fToCandK () {
 const fTemp = parseFloat(fahrenheitInput.vlaue);
 const cTemp = (fTemp - 32) * (5/9);

console.log(fTemp); //returns  NaN
console.log(cTemp); //returns  NaN
}

1 answer

  • answered 2019-07-10 22:42 Jack Giffin

    Is this what you were trying to accomplish? As mentioned in the comments above, there was a typo in your code. Javascript is much more forgiving about undefined properties and much more difficult for foreign speakers (for example, even a person who speak a non-american dialect of English can have trouble with document.body.style.color instead of document.body.style.colour)


    🢔 Because it appears as though you are new to Stackoverflow, I shall explain this checkmark here. After reading and reviewing my answer, if (and only if) you are thoroughly satisfied with the answer I have posted here, then you can reward me by clicking this checkmark to accept this answer as the best answer. If someone else posts a better answer, then click their checkmark. Clicking a checkmark is not permanent: if someone later on post a better answer, then you can click their checkmark and switch the best answer over to the new answer posted.

    const celsiusInput = document.getElementById('celsius-input');
    const fahrenheitInput = document.getElementById('farenheit-input');
    const kelvinInput = document.getElementById('kelvin-input');
    
    var celcius=50, farenheit=NaN, kelvin=NaN;
    
    function cToFandK() {
      for (var i=0; i<2; i=i+1|0) {
        if (celcius === celcius && farenheit !== farenheit)
          farenheit = celcius * 9 / 5 + 32;
        if (farenheit === farenheit && kelvin !== kelvin)
          kelvin = (farenheit - 32) * 5 / 9 + 273.15;
        if (kelvin === kelvin && celcius !== celcius)
          celcius = kelvin - 273.15;
      }
      celsiusInput.value = celcius
      fahrenheitInput.value = farenheit;
      kelvinInput.value = kelvin;
      
    }
    celsiusInput.oninput = function(){
        farenheit = kelvin = NaN;
        celcius = parseFloat(celsiusInput.value);
        cToFandK();
    };
    fahrenheitInput.oninput = function(){
        celcius = kelvin = NaN;
        farenheit = parseFloat(fahrenheitInput.value);
        cToFandK();
    };
    kelvinInput.oninput = function(){
        celcius = farenheit = NaN;
        kelvin = parseFloat(kelvinInput.value);
        cToFandK();
    };
    cToFandK();
    <table>
    <tr><td>Celcius:</td><td><input type="number" id="celsius-input" value="50" /></td></tr>
    <tr><td>Farenheit:</td><td><input type="number" id="farenheit-input" /></td></tr>
    <tr><td>Kelvin:</td><td><input type="number" id="kelvin-input" /></td></tr>
    
    </table>