Math function is returning NaN

[damiano]

I am trying to display a calculated value which is calculated from a variable that is passed to the function.

It gets the var value from an input field, converts it to a number value and then does the math, but it always returns NaN, unless i pass a straight up number as argument to the convertToCelsius function.

Where is the problem here? Maybe i have to capture the input fields value on keyup?

var getInput = document.getElementById('temp').value;

var theTemp = parseInt(getInput, 10);

function convertToCelsius(theTemp) {
  return (5 / 9) * (theTemp - 32);
}

[felgall]

@damiano

Where is the problem here?

You haven’t posted anywhere near enough of the code to be able to tell.

[Mittineague]

What do you get?

var getInput = document.getElementById('temp').value;
console.log("getInput >" + getInput + "<");
var theTemp = parseInt(getInput, 10);
console.log("theTemp >" + theTemp + "<");

function convertToCelsius(theTemp) {
  var returnVal = (5 / 9) * (theTemp - 32);
console.log("returnVal >" + returnVal + "<");
}

[AllanP]

This works:

<p>Type the F temperature</p>
<input id="temp" type="text" name="temp" onchange="convertToCelsius()" value="" size="10"> <input type="button" value="GO" name="b1">

<script type="text/javascript">
function convertToCelsius(theTemp)
{ var getInput = document.getElementById('temp').value;
var theTemp = Number(getInput);
var result= (5/9) * (theTemp - 32);
alert("Result= "+result+" C");
}
</script>

[damiano]

@AllanP

Number(getInput);

Ah soory, people, I forgot to put the link to the pen

http://codepen.io/damianocel/pen/vKmWVy

See, neither the number nor parseInt methods help here, I suspect this is because the value is not read at the right moment. Maybe should get the input value when the element loses focus or on keyup.

[Paul_Wilkins]

[quote=“damiano, post:1, topic:228910, full:true”]
It gets the var value from an input field, converts it to a number value and then does the math, but it always returns NaN,[/quote]

The following code works well:

$getID("demo").addEventListener('click', function(){
  $getID("myText").innerHTML = convertToCelsius(theTemp);
});

But when does the theTemp variable get assigned? Is it before or after someone has entered a temperature?

[damiano]

Well, that is exactly why i/ think this will need a function returning the value on keyup or onblur event. Does the above code work for you? Does not work for me:confused:

[Paul_Wilkins]

@damiano

Well, that is exactly why i/ think this will need a function returning the value on keyup or onblur event. Does the above code work for you? Does not work for me:confused:

That above code focuses on where the problem is occuring. The solution is to assign the theTemp variable inside of that click function.

[AllanP]

The problem is being caused by the use of “onfocus” rather than “focus” in the text box clear handler which means it won’t work. You are also calling
var getInput = document.getElementById('temp').value;
before you have entered a number, so getInput has the text default value at startup (“Enter temperature”), rather than a number.

The following script resolves these problems and works fine.

<script type="text/javascript">
  var tempObj = document.getElementById('temp');
  var demoObj = document.getElementById('demo');
  var myTextObj = document.getElementById('myText');
  tempObj.addEventListener('focus', function(){ if (!this.value == ""){ this.value = "";}} );
  demoObj.addEventListener('click', function(){ myTextObj.innerHTML = (5/9)*(Number(tempObj.value) - 32)});
  demoObj.innerHTML = "click here to convert values";
  var x = document.getElementsByTagName('p');
  for (var i = 0; i < x.length; i++){ x[i].style.transition = '0,5s'; x[i].style.color = "red"; }
</script>

[damiano]

Thank you so much guys, this has been bugging me for too long.

Is it wrong or simply not needed to use a function and then call that for this functionality?

And can someone clear up why the onfocus does not work, I have seen it working in other tutorials, in vanilla js(only seen, not tested it myself)?

[Mittineague]

Yeah, I guess the “on” business can be a bit confusing.

AFAIK the "on_whatever"s are properties, while the “whatevers” are events.

Not that the distinction is as clear as night and day.

[AllanP]

@damiano

And can someone clear up why the onfocus does not work, I have seen it working in other tutorials

The addEventListener() method is not supported in IE 8 and earlier versions, but you can use the attachEvent() method to attach an event handlers to the element in these cases. The addEventListener syntax uses “focus”, while the attachEvent syntax uses “onfocus”.

element.addEventListener("focus", myFunction);

element.attachEvent("onfocus", myFunction);

Perhaps this is where you saw the use of “onfocus”.

[felgall]

@AllanP

The addEventListener() method is not supported in IE 8 and earlier versions

In other words JavaScript uses ‘focus’ while jScript used ‘onfocus’ (up until Microsoft abandoned it and switched to JavaScript)

[Paul_Wilkins]

@AllanP

The addEventListener() method is not supported in IE 8 and earlier versions, but you can use the attachEvent() method to attach an event handlers to the element in these cases. The addEventListener syntax uses “focus”, while the attachEvent syntax uses “onfocus”.

element.addEventListener("focus", myFunction);

element.attachEvent("onfocus", myFunction);

A simple way to make use of these in a cross-browser compatible way, is:

if (el.addEventListener) {
  el.addEventListener('focus', myFunction, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onfocus', myFunction);
}