Javascript basics

Forum Moderators: open

Message Too Old, No Replies

Javascript basics

I'm learning JS and could use a little help

SaminOz

2:29 am on Mar 16, 2009 (gmt 0)

Hi peeps,
I'm just trying to get my head around some of the basic concepts of JavaScript. The code below is my effort at answering a question from the books I'm learning from. I'm stuck as the var degCent keeps on saying it is undefined. I realise the answer will be basic stuff - so I was wondering if anyone can help me spot it? Thanks in advance.

<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function convertDegrees(degEntry)
{
//var degEntry;
var degFahren;
var degCent;

degCent = degEntry;
degFahren = 9/5 * degCent + 32;

return degFahren;
document.write("<p>" +degCent + "\xB0 in Fahrenheit is " + degFahren+ "</p>");
}
</script>
</head>
<body>
<form name="degreeconverter">
<p>Enter your °C - degrees Centigrade - here</p>
<input type="text" size="3" name="degEntry" value="20" />
<input type="button" value="Convert" name="convert" onclick="convertDegrees()" />
<br />
</form>
</body>
</html>

daveVk

5:19 am on Mar 16, 2009 (gmt 0)

function convertDegrees(degEntry)

Expects to be called convertDegrees(some value here for degEntry)

You call it onclick="convertDegrees()", without a value.

You need to somehow get value from here
<input type="text" size="3" name="degEntry" value="20" />
probably better written as
<input type="text" size="3" id="degEntry" value="20" />

Enough clues ? Consider using document.getElementById("degEntry") as part of solution

SaminOz

5:48 am on Mar 16, 2009 (gmt 0)

Yes (I think so) - thanks heaps Dave.

I assumed that "it" new what degEntry was holding - but did wonder how that happened.

SaminOz

11:15 am on Mar 16, 2009 (gmt 0)

Hi David,
I don't know if you're still around but I wanted a little more help if available. I include my interpretation of your advice below. I can see why the <input> id needs to be passed. What I can't understand is why degCent comes back undefined still? It doesn't seem to matter whether I have the doc.write line in the <head> or <body> section - it still is (apparently) undefined - grrr... nash of teeth!

<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function convertDegrees(degEntry)
{
var degFahren;
var degCent;

degCent = degEntry;
degFahren = 9/5 * degCent + 32;

return degFahren;
}
</script>
</head>
<body>
<form name="degreeconverter">
<p>Enter your °C - degrees Centigrade - here</p>
<input type="text" size="3" id="degEntry" value="20" />
<input type="button" value="Convert" name="convert" onclick="convertDegrees(document.getElementById('degEntry'))" />
<script language="JavaScript" type="text/javascript">
document.write("<p>" +degCent + "\xB0 in Fahrenheit is " + degFahren+ "</p>");
</script>
<br />
</form>
</body>
</html>

SaminOz

12:17 pm on Mar 16, 2009 (gmt 0)

PS - I'm not looking for anyone to do my learning for me - but I've tried every permutation (except one obviously!) and can see I'm missing a serious of the puzzle in my general understanding. Just in case there is any sense of disabuse(ment).

daveVk

12:25 pm on Mar 16, 2009 (gmt 0)

You need the value of the input element, not the element itself

document.getElementById('degEntry').value

this is text string, best to convert it to a number, though js may do this for you in some cases. And yes in serious code you should have numeric check.

parseInt( document.getElementById('degEntry').value, 10 )

the 10 makes sure it is treated as decimal

the conversion routine simplifies to

function convertDegrees(degCent)
{ return ( 9/5 * degCent ) + 32;
}

Brackets may not be needed but helps make intent clear.
I changed degEntry to degCent to avoid any confusion.
Using extra lines of code as you had can be useful while debugging.

daveVk

11:06 pm on Mar 16, 2009 (gmt 0)

Ops did not notice the document.write

function convertDegrees(degCent){
var degFahren = ( 9/5 * degCent ) + 32;
document.write("<p>" +degCent + "\xB0 in Fahrenheit is " + degFahren+ "</p>")
}

The return statement is not needed as the call to convertDegrees does nothing with return result.

remove following as degFahren will not be known till after onclick