babylikesburgh
asked on
Array is tripping me up
I want this code to display how many of the entered employees are in each of the income ranges. Is there something wrong with my if..elses?
<?xml version = "1.0" encoding = "utf-8"?>
<!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">
<head>
<title>Calling a function</title>
<script type = "text/javascript">
<!--
var empSales
var empSalesInt
var basePay = 200
var total = new Array(9)
start();
function start()
{
for ( var i = 0; i < total.length; ++i )
total[i]=0
}
function addToArray()
{
var x;
var sales = document.getElementById( "inputVal" ).value;
var salary;
salary = 200 + parseInt(sales.newEntry.value ) * 0.09;
x = Math.floor( salary / 100 );
if( salary < 0 )
return
else if( x > 9 )
{
x = 10
++total[x-2]
}
if( x > 8 )
{
x = 9
++total[x-2]
}
else if( x > 7 )
{
x = 8
++total[x-2]
}
if( x > 6 )
{
x = 7
++total[x-2]
}
else if( x > 5 )
{
x = 6
++total[x-2]
}
if( x > 4 )
{
x = 5
++total[x-2]
}
else if( x > 3 )
{
x = 4
++total[x-2]
}
if( x > 2 )
{
x = 3
++total[x-2]
}
else if( x > 1 )
{
x = 2
++total[x-2]
}
outputArray();
}
function outputArray()
{
var sales = document.getElementById( "inputVal" );
document.write( "<h3>The total sales by amount ranges are: " +
"$200-299: " + total[0] +
"$300-399: " + total[1] +
"$400-499: " + total[2] +
"$500-599: " + total[3] +
"$600-699: " + total[4] +
"$700-799: " + total[5] +
"$800-899: " + total[6] +
"$900-999: " + total[7] +
"$1000 and over: " + total[8] + "</h3>" );
}
//-->
</script>
<body>
<form action = "">
<p>Enter sales for current employee for this week:<br />
<input id = "inputVal" type = "text" />
<input type = "button" value = "Enter"
onclick = "addToArray()" /><br /></p>
</form>
</body>
</html>
ASKER
Ok, I've messed with it and have it working mostly perfect. BUT, I'm not sure how to set the input field back to empty for the next input. It's not in our textbook for JavaScript programming, and I'm having a hard time figuring out my Google search phrase for it =) I'm assuming I should put the code for it after the addToArray function? Or should it be at the bottom of the function within it? Thanks!
<?xml version = "1.0" encoding = "utf-8"?>
<!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">
<head>
<title>Calling a function</title>
<script type = "text/javascript">
<!--
var empSales
var empSalesInt
var basePay = 200
var total = new Array(9)
start();
function start()
{
for ( var i = 0; i < total.length; ++i )
total[i]=0
}
function addToArray()
{
var x;
var sales = document.getElementById( "inputVal" ).value;
var salary;
salary = 200 + parseInt(sales) * 0.09;
x = Math.floor( salary / 100 );
if( salary < 0 )
return
else if( x > 9 )
{
x = 10
++total[x-2]
}
if( x > 8 )
{
x = 9
++total[x-2]
}
else if( x > 7 )
{
x = 8
++total[x-2]
}
if( x > 6 )
{
x = 7
++total[x-2]
}
else if( x > 5 )
{
x = 6
++total[x-2]
}
if( x > 4 )
{
x = 5
++total[x-2]
}
else if( x > 3 )
{
x = 4
++total[x-2]
}
if( x > 2 )
{
x = 3
++total[x-2]
}
else if( x > 1 )
{
x = 2
++total[x-2]
}
}
function outputArray()
{
var sales = document.getElementById( "inputVal" );
document.write( "<h3>The total sales by amount ranges are: " +
"<br /> $200-299: " + total[0] +
"<br />$300-399: " + total[1] +
"<br />$400-499: " + total[2] +
"<br />$500-599: " + total[3] +
"<br />$600-699: " + total[4] +
"<br />$700-799: " + total[5] +
"<br />$800-899: " + total[6] +
"<br />$900-999: " + total[7] +
"<br />$1000 and over: " + total[8] + "</h3>" );
}
//-->
</script>
<body>
<form action = "">
<p>Enter sales for current employee for this week:<br />
<input id = "inputVal" type = "text" />
<input type = "button" value = "Enter"
onclick = "addToArray()" /><br /></p>
<p>Click here when all employees have been added:<br />
<input type = "button" value = "Done"
onclick = "outputArray()" /><br /></p>
</form>
</body>
</html>
You'd flush the .value at the bottom of the function. It's as simple as including:
document.formName.elementN
That sets its string to empty.
Also, you're using document.write() in your outputArray() function, that's probably not a good idea, since document.write() flushes all the content of the page when it is called, you only want to use it when you're building the page, not after the page has already been rendered.
The common practice instead is to have a div on your page and put your updates inside of that div using .innerHTML. Here's an example of your code that does just that:
document.formName.elementN
That sets its string to empty.
Also, you're using document.write() in your outputArray() function, that's probably not a good idea, since document.write() flushes all the content of the page when it is called, you only want to use it when you're building the page, not after the page has already been rendered.
The common practice instead is to have a div on your page and put your updates inside of that div using .innerHTML. Here's an example of your code that does just that:
<?xml version = "1.0" encoding = "utf-8"?>
<!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">
<head>
<title>Calling a function</title>
<script type = "text/javascript">
<!--
var empSales
var empSalesInt
var basePay = 200
var total = new Array(9)
start();
function start()
{
for ( var i = 0; i < total.length; ++i )
total[i]=0
}
function addToArray()
{
var x;
var sales = document.getElementById( "inputVal" );
var salary;
salary = 200 + parseInt(sales.value) * 0.09;
x = Math.floor( salary / 100 );
if( salary < 0 )
return
else if( x > 9 )
{
x = 10
++total[x-2]
}
if( x > 8 )
{
x = 9
++total[x-2]
}
else if( x > 7 )
{
x = 8
++total[x-2]
}
if( x > 6 )
{
x = 7
++total[x-2]
}
else if( x > 5 )
{
x = 6
++total[x-2]
}
if( x > 4 )
{
x = 5
++total[x-2]
}
else if( x > 3 )
{
x = 4
++total[x-2]
}
if( x > 2 )
{
x = 3
++total[x-2]
}
else if( x > 1 )
{
x = 2
++total[x-2]
}
sales.value = "";
}
function outputArray()
{
var sales = document.getElementById( "inputVal" );
var outputDiv = document.getElementById("outputDiv");
outputDiv.innerHTML = "<h3>The total sales by amount ranges are: </h3>";
outputDiv.innerHTML += "<br /> $200-299: " + total[0];
outputDiv.innerHTML += "<br />$300-399: " + total[1];
outputDiv.innerHTML += "<br />$400-499: " + total[2];
outputDiv.innerHTML += "<br />$500-599: " + total[3];
outputDiv.innerHTML += "<br />$600-699: " + total[4];
outputDiv.innerHTML += "<br />$700-799: " + total[5];
outputDiv.innerHTML += "<br />$800-899: " + total[6];
outputDiv.innerHTML += "<br />$900-999: " + total[7];
outputDiv.innerHTML += "<br />$1000 and over: " + total[8];
}
//-->
</script>
<body>
<form action = "">
<p>Enter sales for current employee for this week:<br />
<input id = "inputVal" type = "text" />
<input type = "button" value = "Enter"
onclick = "addToArray()" /><br /></p>
<p>Click here when all employees have been added:<br />
<input type = "button" value = "Done"
onclick = "outputArray()" /><br /></p>
</form>
<div id="outputDiv"></div>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
Excellent!
Also, you may wish to look up the syntax for the switch/case as it is more clear and appropriate for this sort of than than a really long set of if/else. http://www.w3schools.com/JS/js_switch.asp
Below is the working code.
Open in new window