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

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>

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>

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?

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>