Some javascript help.

KrooKedUK

KrooKedUK

KrooKedUK

Associate
Joined
12 Aug 2008
Posts
258
Location
Northern Ireland
Ok I have some javascript to find the average of 4 numbers entered into text fields, but I need to add a function to allow me to output a message when a certain grade is achieved like below. I'm not sure how best to tackle this as it is new to me, but I would guess it could be done with an If statement?

Between 90 and 100 inclusive, output: “You got an A”.
Between 80 and 90 inclusive, output: “You got a B”.
Between 70 and 80 inclusive, output: “You got a C”.
Between 60 and 70 inclusive, output: “You got a D”.
Less than 60, output: “You failed”.

This is the code I have so far:
Code: 
<script language=javascript type=text/javascript>
function calculate(){
var a=eval(document.myform.number1.value);
var b=eval(document.myform.number2.value);
var c=eval(document.myform.number3.value);
var d=eval(document.myform.number4.value);
var e=0;
var e=((a+b+c+d)/4);
document.write("The average is: " + e);
</script>

Any help would be much appreciated. Cheers
 
Thanks for the reply. Will have a look into case statements, whether I will understand how to apply it to the code I have already is a difference matter :D

OK had an attempt. Doesn't work but I hopefully I am getting closer to it.

Code: 
<script language=javascript type=text/javascript>
function calculate(){
var a=eval(document.myform.number1.value);
var b=eval(document.myform.number2.value);
var c=eval(document.myform.number3.value);
var d=eval(document.myform.number4.value);
var e=0;
var e=((a+b+c+d)/4);
var grade=(e);
document.write("The average is: " + e);
}

switch (true) {
case grade >= 90:
window.alert ("You got an A");
break;

case grade >=80:
window.alert("You got a B");
break;

case grade >=70:
window.alert("You got a C");
break;

case grade >=60:
window.alert("You got a D");
break;

default:
alert ("Please enter a Grade");
break;

} // switch ()

</script>

Help me please :)
 
Last edited:
This is how you can do it with a switch statement, but its probably more difficult to read than an if.. then.. else :-

Code: 
function calculateGrade(percentage)
{
var grade;
switch((percentage >= 60) + (percentage >= 70) + (percentage >= 80) + (percentage >= 90))
{
case 0 :
grade = "You failed";
break;
case 1 :
grade = "You got a D";
break;
case 2 :
grade = "You got a C";
break;
case 3 :
grade = "You got a B";
break;
case 4 :
grade = "You got an A";
break;
}

alert(grade)

}

Also, one quick thing, the overlap on the numbers are wrong:-

You cant have

Between 90 and 100 inclusive, output: “You got an A”.
Between 80 and 90 inclusive, output: “You got a B”.
.............................

Should either be

Between 91 and 100 inclusive, output: “You got an A”.
Between 80 and 90 inclusive, output: “You got a B”.
..............................

or

Between 90 and 100 inclusive, output: “You got an A”.
Between 80 and 89 inclusive, output: “You got a B”.
...............................

Hope this helps.
 
Cheers dude. I now understand how the switch statement works :)

Still haven't got it working, all I get is the You Failed message no matter what the grade.

Here's the code:

Code: 
<script language=javascript type=text/javascript>
function calculate(){
var a=eval(document.myform.number1.value);
var b=eval(document.myform.number2.value);
var c=eval(document.myform.number3.value);
var d=eval(document.myform.number4.value);
var e=0;
var e=((a+b+c+d)/4);
var grade=(e);
document.write("The average is: " + e);
}

function calculateGrade(percentage)
{
var grade;
switch((percentage >= 60) + (percentage >= 70) + (percentage >= 80) + (percentage >= 90))
{
case 0 :
grade = "You failed";
break;
case 1 :
grade = "You got a D";
break;
case 2 :
grade = "You got a C";
break;
case 3 :
grade = "You got a B";
break;
case 4 :
grade = "You got an A";
break;
}

alert(grade)

}
</script>


Code: 
<form name="myform" onSubmit="calculate();">
<h2>Average of Numbers</h2>
<p><label for="number1">Input first number here: </label><input type="text" size="10" name="number1" id="number1"/> </p>
<p><label for="number2">Input second number here: </label><input type="text" size="10" name="number2" id="number2"/></p>
<p><label for="number3">Input third number here: </label><input type="text" size="10" name="number3" id="number3"/></p>
<p><label for="number4">Input fourth number here: </label><input type="text" size="10" name="number4" id="number4"/></p>
<input type="submit" value="Calculate the sum" onClick="calculateGrade;"/>
</form>

Not sure what I've done wrong :/
 
The calculateGrade function takes a parameter so it can work out what grade is required. This was missing from the call. As your button on the page is a submit button, you dont need the onclick event as the onSubmit will be called on the button click.

Try this:-

Code: 
<html>
<head>

<script language=javascript type=text/javascript>
function calculate(){
var a=eval(document.myform.number1.value);
var b=eval(document.myform.number2.value);
var c=eval(document.myform.number3.value);
var d=eval(document.myform.number4.value);
var e=0;
var e=((a+b+c+d)/4);

document.write(calculateGrade(e));

}

function calculateGrade(percentage)
{
var grade;
switch((percentage >= 60) + (percentage >= 70) + (percentage >= 80) + (percentage >= 90))
{
case 0 :
grade = "You failed";
break;
case 1 :
grade = "You got a D";
break;
case 2 :
grade = "You got a C";
break;
case 3 :
grade = "You got a B";
break;
case 4 :
grade = "You got an A";
break;
}

return grade;

}
</script>

</head>

<body>

<form name="myform" onSubmit="calculate();">
<h2>Average of Numbers</h2>
<p><label for="number1">Input first number here: </label><input type="text" size="10" name="number1" id="number1"/> </p>
<p><label for="number2">Input second number here: </label><input type="text" size="10" name="number2" id="number2"/></p>
<p><label for="number3">Input third number here: </label><input type="text" size="10" name="number3" id="number3"/></p>
<p><label for="number4">Input fourth number here: </label><input type="text" size="10" name="number4" id="number4"/></p>
<input type="submit" value="Calculate the sum""/>
</form>

</body>
</html>
 
You must log in or register to reply here.
Back
Top Bottom