getElementById

**minusten** · Mar 28, 2011 23:26

Hi,

Ive been working on this for two weeks my javascript skills are beginner to the extreme!

I can't get it working can anyone see some thing obvious i ve overlooked?
The results arent showing up in the input area

Code:

<html>
<head>
	<title>Aggregates</title>

	<script type="text/javascript">

            var array = new Array();

            function insert(val)
			{
                array[array.length]=val;
            }

            function show() 
			{
                var string="";
                for(i = 0; i < array.length; i++) 
			
                document.getElementById("e").value =    string=string+array[i]+"\n";
            
			}
			
			function sum(numbers) 
			{     
			if (numbers.length == 0) 
			return 0;    
			for (var i=0,total=0; i<array.length; i++)  ;       
			   
			
			document.getElementById("sum").value = total += numbers[i];return total;
			}
			
			function mean(numbers) 
			{    
			return numbers.length == 0 ? 0 : sum(numbers)/numbers.length;
			
			document.getElementById("answer") = mean.value;
			}
		
        </script>
        
</head>

<body>
	<h1>Aggregates</h1>

	<h3>Add as many numbers as you like </br> to the list, then click Calculate.</h3>
    
	
	<form id="form">
	    <input type="text" name="name" value=""></input>
        <input type="button" value="Add to list" onClick="insert(this.form.name.value),show();"></input></br>
        <textarea name="txt" id="e" rows="10" ></textarea> </br>
        
        
        
        <h4>Total (Sum):</h4>
		<input type="text" id="Sum" value="0"></input></br>
        <input type="button" value="Calculate" onClick="sum(numbers);mean(numbers);"></input> 
       
        
        
        <h4>Average:</h4>
        
        <input type="text" id="answer" value="0"></input></br>
        <input type="button" value="Reset" onClick="form.reset();" />
	</form>
   
		
</body>

</html>

**chris.upjohn** · Mar 29, 2011 04:19

I'm kind of lost as to what your trying to do as your last 2 functions don't make any sense to me, it looks as though you want to count something but the var number doesn't exist so you would keep getting an undefined var error on the page.

**minusten** · Mar 29, 2011 19:31

Your right, it does error

of the last two functions the first is supposed to get the sum of the array data and second is supposed to work out the average .

Is that any clearer? Any ideas?

**chris.upjohn** · Mar 29, 2011 20:51

So i assume that for instance you want to retrieve the values stored in the var array, then merge all the stored values into one integer and then divide that by the array.length count?

Did i get close or a full nail in it?

**minusten** · Mar 29, 2011 20:55

I think thats a full nail

**chris.upjohn** · Mar 29, 2011 21:20

I believe the below is what your looking for.

Code JavaScript:

var total = 0;
 
function sum() {
    if (!array.length) return false;
 
    for (var i = 0; i < array.length; i++) {
        total = total + array[i];
    }
 
    document.getElementById('sum').value = total;
    return total;
}
 
function mean() {
    document.getElementById('answer') = total;
    return !array.length ? 0 : total / array.length;
}

**minusten** · Mar 29, 2011 23:40

thanks for your help!

can you tell me why this isn't working?
var numbers = new Array();

function insert(val)
{
numbers[numbers.length]= parseFloat(val);
}

function show()
{
var string="";
for(i = 0; i < numbers.length; i++)

string= string + numbers[i]+"\n";

document.getElementById("e").value =string;
}

**chris.upjohn** · Mar 30, 2011 03:11

Try the following as you have a couple of errors in those functions

Code JavaScript:

var array = new Array();
 
function insert(val) {
    array.push(val);
}
 
function show() {
    var string = '';
 
    for (i = 0; i < array.length; i++) {
        string += array[i] + '\n';
    }
 
    document.getElementById('e').value = string;
}

**minusten** · Mar 30, 2011 15:25

Hi,

This has been very usefull can you tell me what the push extension does?

I tried it with .push and it didn't work for me? any suggestions?
var numbers = new Array();

function insert(val)
{
numbers[numbers.length]= parseFloat(val);
}

function show()
{
var string="";
for(i = 0; i < numbers.length; i++)
{
string += array[i] +"\n";
}
string= string + numbers[i]+"\n";

document.getElementById("e").value =string;
}

**paul_wilkins** · Mar 30, 2011 16:45

Originally Posted by minusten

can you tell me what the push extension does?

push() is not an extension. It's a normal part of JavaScript.

You can read more about it at the documentation page for push()

**minusten** · Mar 30, 2011 17:09

Originally Posted by paul_wilkins

You can read more about it at the documentation page for push()

Thanks for the the link very handy!

Can you see why this wouldn't work im completely out of avenues to pursue

My only other thought is maybe the numbers input isn't being display because of some html form issue?

Please disregard the sum() and mean() still working on those.

When i run this in firefox the error console says val undefined and highlights this first html???

<html>
<head>
<title>Aggregates</title>

<script type="text/javascript">

var numbers = new Array();

function insert(val)
{
numbers[numbers.length]= parseFloat(val);
}

function show()
{
var string="";
for(i = 0; i < numbers.length; i++)
{
string += array[i] +"\n";
}

document.getElementById("e").value =string;
}

function sum(numbers)
{
if (numbers.length == 0)
for (i=0; i <numbers.length; i++)

document.getElementById("Sum").value = total += numbers[i];return total;
}

function mean(numbers)
{
return numbers.length == 0 ? 0 : sum(numbers)/numbers.length;

document.getElementById("answer") = mean(numbers).value;
}

</script>

</head>

<body>
<h1>Aggregates</h1>

<h3>Add as many numbers as you like </br> to the list, then click Calculate.</h3>

<form id="form">
<input type="text" name="name" value=""></input>
<input type="button" value="Add to list" onClick="insert(val),show();"></input></br>
<textarea name="txt" id="e" rows="10" ></textarea> </br>

<h4>Total (Sum)

/h4>
<input type="text" id="txtTotal" value="0"></input></br>
<input type="button" value="Calculate" onClick="sum(numbers);mean(numbers);"></input>

<h4>Average

/h4>

<input type="text" id="answer" value="0"></input></br>
<input type="button" value="Reset" onClick="form.reset();" />
</form>

</body>

</html>

**paul_wilkins** · Mar 30, 2011 17:24

Originally Posted by minusten

TCan you see why this wouldn't work im completely out of avenues to pursue

When clicking Add to List, the web browser reports this error:

Uncaught ReferenceError: val is not defined - test.html:58

So, this seems to be wrong:

Code:

insert(val)

Instead, you need to give the function the value from the input field, so instead of val you need to use this.form.elements.name.value instead, resulting in:

Code javascript:

insert(this.form.elements.name.value)

Then you get another error, which is good news. It means the first error is fixed. Progress!

The error is:

Uncaught ReferenceError: array is not defined - test.html:21

which is this line:

Code:

string += array[i] +"\n";

array is not used anywhere else in the code. Instead, I see that numbers is used.
That means that array[i] should instead be numbers[i]

Code javascript:

string += numbers[i] +"\n";

Then you have to work out why the sum section is not being updated.

**minusten** · Mar 30, 2011 17:37

Theres a new error that points a grren arrow at .this in the ()
missing formal parameter
function insert(this.form.elements.name.value)

I could have sworn id done this , musn't have saved.

"array is not used anywhere else in the code. Instead, I see that numbers is used.
That means that array[i] should instead be numbers[i]

javascript Code:

string += numbers[i] +"\n";"

**minusten** · Mar 30, 2011 17:42

<html>

<head>
<title>Aggregates</title>

<script type="text/javascript">

var numbers = new Array();

function insert(this.form.elements.name.value)
{
numbers[numbers.length]= parseFloat(val);
}

function show()
{
var string="";
for(i = 0; i < numbers.length; i++)
{
string += numbers[i] +"\n";
}

document.getElementById("e").value =string;
}

function sum(numbers)
{
if (numbers.length == 0)
for (i=0; i <numbers.length; i++)

document.getElementById("Sum").value = total += numbers[i];return total;
}

function mean(numbers)
{
return numbers.length == 0 ? 0 : sum(numbers)/numbers.length;

document.getElementById("answer") = mean(numbers).value;
}

</script>

</head>

<body>
<h1>Aggregates</h1>

<h3>Add as many numbers as you like </br> to the list, then click Calculate.</h3>

<form id="form">
<input type="text" name="name" value=""></input>
<input type="button" value="Add to list" onClick="insert(this.form.elements.name.value),show();"></input></br>
<textarea name="txt" id="e" rows="10" ></textarea> </br>

<h4>Total (Sum)

/h4>
<input type="text" id="txtTotal" value="0"></input></br>
<input type="button" value="Calculate" onClick="sum(numbers);mean(numbers);"></input>

<h4>Average

/h4>

<input type="text" id="answer" value="0"></input></br>
<input type="button" value="Reset" onClick="form.reset();" />
</form>

</body>

</html>

**minusten** · Mar 30, 2011 18:04

I got it! thanks heaps

the errors are gone
the numbers display and are added to numbers array!

THANK YOU ALL

**minusten** · Mar 30, 2011 18:37

Hi,

could you help me understand this;

onClick= "(this.form.elements.name.value);"

i get (this. form

a link would do

thanks

**paul_wilkins** · Mar 30, 2011 18:52

Originally Posted by minusten

could you help me understand this;

onClick= "(this.form.elements.name.value);"

i get (this. form

a link would do

form.elements

Normally, the form tag uses a unique identifier so that you can easily target that from your script, and the form elements such as input use a name identifier.

Code html4strict:

<form id="form">
    <input type="text" name="name" value="">

By the way, input elements do not have closing tags. They are just a single tag, in much the same way as for <hr> or <br> or <img>

When you have the form, you can then easily access the form elements collection.

Code javascript:

var form = document.getElementById('form');
var allFields = form.elements;
var nameField = allFields['name'];
var nameValue = nameField.value;

Or, as a condensed version:

Code javascript:

var form = document.getElementById('form');
var nameValue = form.elements['name'].value;

Which can also be represented as:

Code javascript:

var form = document.getElementById('form');
var nameValue = form.elements.name.value;

User Tag List

Thread: getElementById

Thread Tools

Display

getElementById

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions