getElementById

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:rolleyes:

<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]+"\
";
            
			}
			
			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>

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.

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?:slight_smile:

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?

I think thats a full nail:D

I believe the below is what your looking for.

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;
}

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 &lt; numbers.length; i++)
		
			string= string + numbers[i]+"\

";

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

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

var array = new Array();

function insert(val) {
    array.push(val);
}

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

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 &lt; numbers.length; i++)
		{
			string += array[i] +"\

“;
}
string= string + numbers[i]+”
";

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

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

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

Thanks for the the link very handy!:slight_smile:

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???:crazy:

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

&lt;script type="text/javascript"&gt;		
		

        var numbers = new Array();

        function insert(val)
		{
            numbers[numbers.length]= parseFloat(val);
        }
		
		
        function show() 
		{
            var string="";										
            for(i = 0; i &lt; numbers.length; i++)
		{
			string += array[i] +"\

";
}

        document.getElementById("e").value =string;
		}
		
		function sum(numbers) 
		{     
		if (numbers.length == 0)    
		for (i=0; i &lt;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;
		}
	
		
    &lt;/script&gt;

</head>

<body>
<h1>Aggregates</h1>

&lt;h3&gt;Add as many numbers as you like &lt;/br&gt; to the list, then click Calculate.&lt;/h3&gt;


&lt;form id="form"&gt;
    &lt;input type="text" name="name" value=""&gt;&lt;/input&gt;
    &lt;input type="button" value="Add to list" onClick="insert(val),show();"&gt;&lt;/input&gt;&lt;/br&gt;
    &lt;textarea name="txt" id="e" rows="10" &gt;&lt;/textarea&gt; &lt;/br&gt;
    
    
    
    &lt;h4&gt;Total (Sum):&lt;/h4&gt;
	&lt;input type="text" id="txtTotal" value="0"&gt;&lt;/input&gt;&lt;/br&gt;
    &lt;input type="button" value="Calculate" onClick="sum(numbers);mean(numbers);"&gt;&lt;/input&gt; 
   
    
    
    &lt;h4&gt;Average:&lt;/h4&gt;
    
    &lt;input type="text" id="answer" value="0"&gt;&lt;/input&gt;&lt;/br&gt;
    &lt;input type="button" value="Reset" onClick="form.reset();" /&gt;
&lt;/form&gt;

</body>

</html>

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:

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:

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:

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

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]

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

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

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] +"
“;”

<html>

&lt;head&gt;
&lt;title&gt;Aggregates&lt;/title&gt;

&lt;script type="text/javascript"&gt;		
		

        var numbers = new Array();

        function insert(this.form.elements.name.value)
		{
            numbers[numbers.length]= parseFloat(val);
        }
		
		
        function show() 
		{
            var string="";										
            for(i = 0; i &lt; numbers.length; i++)
		{
			string += numbers[i] +"\

";
}

        document.getElementById("e").value =string;
		}
		
		function sum(numbers) 
		{     
		if (numbers.length == 0)    
		for (i=0; i &lt;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;
		}
	
		
    &lt;/script&gt;

</head>

<body>
<h1>Aggregates</h1>

&lt;h3&gt;Add as many numbers as you like &lt;/br&gt; to the list, then click Calculate.&lt;/h3&gt;


&lt;form id="form"&gt;
    &lt;input type="text" name="name" value=""&gt;&lt;/input&gt;
    &lt;input type="button" value="Add to list" onClick="insert(this.form.elements.name.value),show();"&gt;&lt;/input&gt;&lt;/br&gt;
    &lt;textarea name="txt" id="e" rows="10" &gt;&lt;/textarea&gt; &lt;/br&gt;
    
    
    
    &lt;h4&gt;Total (Sum):&lt;/h4&gt;
	&lt;input type="text" id="txtTotal" value="0"&gt;&lt;/input&gt;&lt;/br&gt;
    &lt;input type="button" value="Calculate" onClick="sum(numbers);mean(numbers);"&gt;&lt;/input&gt; 
   
    
    
    &lt;h4&gt;Average:&lt;/h4&gt;
    
    &lt;input type="text" id="answer" value="0"&gt;&lt;/input&gt;&lt;/br&gt;
    &lt;input type="button" value="Reset" onClick="form.reset();" /&gt;
&lt;/form&gt;

</body>

</html>

I got it! thanks heaps:D

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

THANK YOU ALL

Hi,

could you help me understand this;

onClick= “(this.form.elements.name.value);”

i get (this. form

a link would do

thanks

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.


<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.


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

Or, as a condensed version:


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

Which can also be represented as:


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