Newbie to javascript

PaulStat · 30 Apr 2006 at 13:10

Right, i've never used javascript before, so I thought i'd try a few simple scripts. Apart from the fact that IE is being really annoying and disabling the scripts upon loading the page, I can't get a simple function to work that calculates the average of 4 ages. Should be really easy right?!?!?

Code:

<HTML>             
<SCRIPT>  

function avgAge( a, b, c, d ) {
  plaintxt = window.open("","plain","WIDTH=600,HEIGHT=300") 
  plaintxt.document.open("text/plain") 
  pdw = plaintxt.document.write 
  avg = (a+b+c+d)/4
  pdw(' The average age of the students is ' + avg) 
}

</SCRIPT>
<BODY>
<FORM onSubmit = "avgAge( this.student1, this.student2, this.student3, this.student4 )">
   Age of student 1:   <input type="text" name="student1"> <br>
   Age of student 2:   <input type="text" name="student2"> <br>
   Age of student 3:   <input type="text" name="student3"> <br>
   Age of student 4:   <input type="text" name="student4"> <br>
   <input type="submit">
</FORM>
</BODY>
</HTML>

The result it come with is

'The average age of the students is NaN'

wtf??? :confused:

Edit: Ok so it means 'Not a Number' apparently, so how does one convert a string to a numeric value in javascript

robmiller · 30 Apr 2006 at 13:31

Code:

var string = '3';
var int = 3;

var intFromString = parseInt(string);
var stringFromInt = int + '';

PaulStat · 30 Apr 2006 at 13:43

Ok so it appears I was passing the input object and not the value. So here's the change.

Code:

<FORM onSubmit = "avgAge( this.student1.value, this.student2.value, this.student3.value, this.student4.value )">

Now the problem is when I do the following

Code:

avg = (a+b+c+d)/4

It's trying to concatenate strings.

So can I do something like the following:

Code:

function avgAge( parseInt(a), parseInt(b), parseInt(c), parseInt(d) ) {

PaulStat · 30 Apr 2006 at 13:52

That would be a no then, ok the long way round and final code :rolleyes:

Code:

<HTML>             
<SCRIPT>  

function avgAge( a, b, c, d ) {
  plaintxt = window.open("","plain","WIDTH=600,HEIGHT=300") 
  plaintxt.document.open("text/plain") 
  pdw = plaintxt.document.write
  a2 = parseInt(a)
  b2 = parseInt(b)
  c2 = parseInt(c)
  d2 = parseInt(d)
  avg = ((a2+b2+c2+d2)/4)
  pdw(' The average age of the students is ' + avg) 
}

</SCRIPT>
<BODY>
<FORM onSubmit = "avgAge( this.student1.value, this.student2.value, this.student3.value, this.student4.value )">
   Age of student 1:   <input type="text" name="student1"> <br>
   Age of student 2:   <input type="text" name="student2"> <br>
   Age of student 3:   <input type="text" name="student3"> <br>
   Age of student 4:   <input type="text" name="student4"> <br>
   <input type="submit">
</FORM>
</BODY>
</HTML>

robmiller · 30 Apr 2006 at 14:05

Have it take an array as a parameter, loop through the array to add up the values, then divide them by the array's length property. Then you can do it with more or less than 4 ages and it'll work fine

PaulStat · 30 Apr 2006 at 15:24

robmiller said:
Have it take an array as a parameter, loop through the array to add up the values, then divide them by the array's length property. Then you can do it with more or less than 4 ages and it'll work fine

Ok i've taken your challenge, and I'm not getting too far, where am I going wrong?

Code:

<HTML>             
<SCRIPT>  

function avgAge( f ) {
  plaintxt = window.open("","plain","WIDTH=600,HEIGHT=300") 
  plaintxt.document.open("text/plain") 
  pdw = plaintxt.document.write
  element = plaintxt.document.write
  total = 0
  for(i=0; i<f.elements.length; i++) {
     val = parseInt(f.elements[i].value)
     total += val
     element(' Total is ' +val\r\n)     
  } 
  avg = total/f.elements.length
  pdw(' The average age of the students is ' + avg) 
}

</SCRIPT>
<BODY>
<FORM onSubmit = "avgAge( this )">
   Age of student 1:   <input type="text" name="student1"> <br>
   Age of student 2:   <input type="text" name="student2"> <br>
   Age of student 3:   <input type="text" name="student3"> <br>
   Age of student 4:   <input type="text" name="student4"> <br>
   <input type="submit">
</FORM>
</BODY>
</HTML>

Moredhel · 30 Apr 2006 at 16:26

For some reason, writing to an opened window like that doesn't seem to work for me, the code I used below does the calculation fine and does an alert with the result, as soon as I try and add the code to create a new window and write to it, it just doesn't do it. I'm wondering if it's being prevented by my browsers built in XSS prevention or something.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Javascript Example</title>
    <script type="text/javascript">
    <!--
        function ageavg( f ) {
            var total = count = 0;
            for(var i = 0; i < f.elements.length; i ++) {
                if (f.elements[i].name.substring(0,4) == 'stud') {
                    var val = parseInt(f.elements[i].value);
                    total += val;
                    count ++;
                }
            }
            var avg = total / count;
            alert('The average age of the students is ' + avg);
        }
    //-->
    </script>
    <style type="text/css" media="all">
    <!--
        label {
            display: block;
        }   
    --> 
    </style>
</head>
<body>
     <form onsubmit="ageavg(this)">
        <div>
            <label for="stud1">Name of Student 1: <input type="text" id="stud1" name="stud1" /></label>
            <label for="stud2">Name of Student 2: <input type="text" id="stud2" name="stud2" /></label>
            <label for="stud3">Name of Student 3: <input type="text" id="stud3" name="stud3" /></label>
            <label for="stud4">Name of Student 4: <input type="text" id="stud4" name="stud4" /></label>
            <input type="submit" value="Calculate" />
         </div>
     </form>
</body>
</html>

PaulStat · 30 Apr 2006 at 16:46

I presume you did it that cos the submit button gets classed as an element of the form too?

Moredhel · 30 Apr 2006 at 16:48

Yeah, and there could be other elements of the form at a later date too.

PaulStat · 3 May 2006 at 20:59

Ok, i've got pretty much the same as you. So why doesn't this work.

Code:

<HTML>             
<SCRIPT>  

function avgAge( f ) {
  var total = count = 0;
  for(i=0; i<f.elements.length; i++) {
     if(f.elements[i].name.substring(0,4)=="stud") {
        var val = parseInt(f.elements[i].value);
        total += val;
        count++;
     }
  } 
  var avg = total/count;
  alert(' The average age of the students is ' + avg) 
}

</SCRIPT>
<BODY>
<FORM onSubmit = "avgAge( this )">
   Age of student 1:   <input type="text" name="student1"> <br>
   Age of student 2:   <input type="text" name="student2"> <br>
   Age of student 3:   <input type="text" name="student3"> <br>
   Age of student 4:   <input type="text" name="student4"> <br>
   <input type="submit">
</FORM>
</BODY>
</HTML>