<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>MultipleOf</title>
<script>
var sales = new Array(9); //array for keeping sales numbers
var pay = ["200-299","300-399","400-499","500-599","600-699","700-799","800-899","900-999","1000 and over"];
var tally = new Array(9); //array for keeping statistics
result=""; //for table creation
temp="";
for(i=0; i<9; i++){ //initialize empty arrays of numbers
tally[i] =0;
sales[i] =0;
}
function start(){ //button to launch everything
var button = document.getElementById("clickButton");
button.addEventListener("click", giveResult, false);
}
function giveResult(){ //is supposed to calculate sales and add one to the tally the position which the sale belongs.
for(var i=0; i<9; i++){
temp="e"+i;
sales[i]= parseInt(document.getElementById(temp)); //Grab info from form (currently from first field)
sales[i]=paid(sales[i]); //calculate pay for sales made and overwrite sales amount
var placement = decide(sales[i]); //decide which statistic to increment according to amount paid
tally[placement]= tally[placement]+1; //increment statistic
}
var result = document.getElementById("result");
temp = display(result);
result.innerHTML = temp;
}
function paid(salesAmount){
return 200+(salesAmount*0.09);
}
function decide(amountPaid){
if(amountPaid>1000)
return 8;
else if(amountPaid>900)
return 7;
else if(amountPaid>800)
return 6;
else if(amountPaid>700)
return 5;
else if(amountPaid>600)
return 4;
else if(amountPaid>500)
return 3;
else if(amountPaid>400)
return 2;
else if(amountPaid>300)
return 1;
if(amountPaid>=200)
return 0;
else
return -1;
}
function display(value){
value = "<table>"
for(var i=0;i<pay.length; i++){
value = value + "<tr><td>" + pay[i] + "</td>" + "<td>" + tally[i] + "</td>" ;
}
value = value + "</table>";
return value;
}
window.addEventListener("load",start,false);
</script>
</head>
<body>
<form action="#">
<p><label>Enter Employee Sales for the week:</label></p>
<p>Employee 1:<input id="e1" type="number" value="0"></p>
<p>Employee 2:<input id="e2" type="number" value="0"></p>
<p>Employee 3:<input id="e3" type="number" value="0"></p>
<p>Employee 4:<input id="e4" type="number" value="0"></p>
<p>Employee 5:<input id="e5" type="number" value="0"></p>
<p>Employee 6:<input id="e6" type="number" value="0"></p>
<p>Employee 7:<input id="e7" type="number" value="0"></p>
<p>Employee 8:<input id="e8" type="number" value="0"></p>
<p>Employee 9:<input id="e9" type="number" value="0"></p>
<p><input id = "clickButton" type="button" value = "Calculate"></p>
</form>
<p id = "result"></p>
<footer>
<p>
</p>
</footer>
</body>
I am hoping to input sales numbers into a form, then calculate the earnings for each employee using the function paid(), and then to take those earnings and sort them into a table with ranges such as defined by the pay array.
The problem is I am not sure what I am doing wrong, is it my paid() function that is messing up the counters?
The tally array is not being updated correctly and I am not sure why.
Try
parseInt(document.getElementById(temp).value, 10)instead.