Help please with Listbox total and average

Question

LizzyJo 0 Newbie Poster

14 Years Ago

Hi there everyone. I have a problem with the JavaScript code for my aggregates workings for my course. I have worked out with some help how to input a number, click a button and get the number to appear in a listbox. I also had to get the Reset button to clear all fields including the listbox which I managed to work out.

I am now having problems getting it to total all the numbers in the list box. I have managed to get it to do something but get 'undefined' in the Total Sum box. I also need to average it but haven't really done much with sorting it out yet as it doesn't work either.

Would someone be so kind as to tell me where I am going wrong with this as I am still learning JavaScript

Below is the code that I have so far

<script>

function testAdd() 
	{
    var formObject = document.aggregate
    if (formObject.input.value!="")
        addOption(formObject.List,formObject.input.value)
    } 
function addOption(selectObject,input) 
	{
    var optionObject = new Option(input)
    var optionRank = selectObject.options.length
    selectObject.options[optionRank]=optionObject
	}
function GetTotal()
        {
            var list = eval(document.getElementById('List').value)

            document.getElementById('Total Sum').value = list ;
        }
function average()
	{
		document.getElementById("Average").value = select.Avg("List");
	}

function ListBoxClear()
{
   document.getElementById('List').options.length = 0;
}
</script>
</head>
<body>
<h1>Aggregates</h1>
</p>
<strong> Add as many numbers as you like<br />
to the list, then click Calculate.</strong><br />
<form id="aggregate" name="aggregate" action="">
  <label>
  <input name="input" type="text" id="input" size="10" maxlength="10" />
  </label>
  <label>
  <input id="Add" input type="button" value="Add to list" onclick="testAdd()"/>
  </label>
  <br />
  <label>
  <select name="List" multiple="MULTIPLE" id="List" size="10">
  </select>
  </label>

      <br />
  <input type="button" name="Calculate" id="Calculate" value="Calculate" onclick="GetTotal();average()" />
  <label>

  <input name="Reset" type="reset" id="Reset" onclick="ListBoxClear()" value="Reset" />
  </label>
  <p><strong>Total (Sum):</strong></p>
  <p>
    <label>
    <input name="Total Sum" type="text" id="Total Sum" />
    </label>
  </p>
  <p><strong>Average:</strong></p>
  <p>
    <label>
    <input name="Average" type="text" id="Average" />
    </label>
    <br />  
  </p>
  <label></label>
</form>

javascript

3 Contributors
3 Replies
117 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by LizzyJo

jeremya 0 Newbie Poster

14 Years Ago

To me it looks like you need to loop through the list of options to get the sum. Getting the value of "list" seems like it would only return the value of the selected option.

Hi there everyone. I have a problem with the JavaScript code for my aggregates workings for my course. I have worked out with some help how to input a number, click a button and get the number to appear in a listbox. I also had to get the Reset button to clear all fields including the listbox which I managed to work out.

I am now having problems getting it to total all the numbers in the list box. I have managed to get it to do something but get 'undefined' in the Total Sum box. I also need to average it but haven't really done much with sorting it out yet as it doesn't work either.

Would someone be so kind as to tell me where I am going wrong with this as I am still learning JavaScript

Below is the code that I have so far

<script>

function testAdd() 
	{
    var formObject = document.aggregate
    if (formObject.input.value!="")
        addOption(formObject.List,formObject.input.value)
    } 
function addOption(selectObject,input) 
	{
    var optionObject = new Option(input)
    var optionRank = selectObject.options.length
    selectObject.options[optionRank]=optionObject
	}
function GetTotal()
        {
            var list = eval(document.getElementById('List').value)

            document.getElementById('Total Sum').value = list ;
        }
function average()
	{
		document.getElementById("Average").value = select.Avg("List");
	}

function ListBoxClear()
{
   document.getElementById('List').options.length = 0;
}
</script>
</head>
<body>
<h1>Aggregates</h1>
</p>
<strong> Add as many numbers as you like<br />
to the list, then click Calculate.</strong><br />
<form id="aggregate" name="aggregate" action="">
  <label>
  <input name="input" type="text" id="input" size="10" maxlength="10" />
  </label>
  <label>
  <input id="Add" input type="button" value="Add to list" onclick="testAdd()"/>
  </label>
  <br />
  <label>
  <select name="List" multiple="MULTIPLE" id="List" size="10">
  </select>
  </label>

      <br />
  <input type="button" name="Calculate" id="Calculate" value="Calculate" onclick="GetTotal();average()" />
  <label>

  <input name="Reset" type="reset" id="Reset" onclick="ListBoxClear()" value="Reset" />
  </label>
  <p><strong>Total (Sum):</strong></p>
  <p>
    <label>
    <input name="Total Sum" type="text" id="Total Sum" />
    </label>
  </p>
  <p><strong>Average:</strong></p>
  <p>
    <label>
    <input name="Average" type="text" id="Average" />
    </label>
    <br />  
  </p>
  <label></label>
</form>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2009-11-22T19:58:33+00:00

LizzyJo,

Consider this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Aggregation</title>
<style type="text/css">
body {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10pt;
}
form {
	margin: 0;
}
#outerwrapper {
	width: 240px;
	border: 2px solid #006699;
}
#outerwrapper h1 {
	margin: 0;
	padding: 3px 0;
	background-color: #99CCFF;
	color: #006699;
	font-size: 14pt;
	text-align: center;
	border: 0px solid #006699;
	border-bottom-width: 1px;
}
#innerwrapper {
	padding: 10px;
}
#innerwrapper p {
	margin: 0 0 10px 0;
}
#innerwrapper h3 {
	margin: 3px 0;
	font-size: 10pt;
	
}
</style>
<script>
onload = function(){
	var f = document.aggregate;
	var el = f.input;
	var el2 = f.list;
	var el3 = f.total_sum;
	var el4 = f.average;
	if(f.add) f.add.onclick = function(){//Add
		if(el && el2){
			if(el.value && Number(el.value).toString() == el.value){
				el2.options[el2.options.length] = new Option(el.value);
			}
		}
	};
	if(f.calculate) f.calculate.onclick = function(){//Calculate
		if(el2 && el3 && el4){
			var sum = 0;
			for(var i=0; i<el2.length; i++){ sum += Number(el2[i].innerHTML); }
			el3.value = sum;
			el4.value = sum / el2.length;
		}
	};
	if(f.reset) f.reset.onclick = function(){//Clear list
		if(el2) { el2.innerHTML = ''; }
	};
}
</script>
</head>
<body>

<div id="outerwrapper">
  <h1>Aggregates</h1>
  <div id="innerwrapper">
    <p>Add as many numbers as you like to the list, then click Calculate.</p>
    <form name="aggregate" action="">
      <div>
        <input type="text" name="input" size="10" maxlength="10" />
        <input type="button" name="add" input value="Add to list"/>
      </div>
      <div><select multiple="multiple" name="list" size="10"></select></div>
      <div>
        <input type="button" name="calculate" value="Calculate" />
        <input type="reset" name="reset" value="Reset" />
      </div>
      <h3>Total:</h3>
      <div><input name="total_sum" type="text" /></div>
      <h3><strong>Average:</h3>
      <div><input name="average" type="text" /></div>
    </form>
  </div>
</div>
</body>
</html>

Note how the functions are defined and attached to their respective buttons in one go. No onclicck=.... is necessary in the HTML. This pattern also creates no members in the global namespace, thus avoiding its pullution.

Whereas this will probably blow your mind at first, it has significant advantages in terms of code simplicity especially as things get more complex. It also serves as a good basis for the use of javascript libs such as jQuery and Prototype.

If you are going to get serious about javascript then you need to learn how to do things this way.

There's also some css to make things pretty.

Airshow

LizzyJo 0 Newbie Poster · Answer 2 · 2009-11-23T14:39:32+00:00

Thanks so much for your help jeremya and Airshow.
I like the css Airshow. Makes it look loads better.
I see how it all works now and understand abit more on how you got to this code. It is all starting to make sense :)
Thanks again for all your help