Creating grade calculator, using score, and possible grade to calculate grade percentage and letter grade, which is to update live. Why won't this code won't work. Please, help!

Question

1.00/5 (1 vote)

See more:

The code below is what I am using.
I should note I am new to JavaScript, and it mostly goes completely over my head because I can't extrapolate real life examples from the stuff in text books (nobody is EVER going to use JavaScript to get a page to say "hello world", hard coded, when HTML will do that just fine).

What I have tried:

HTML

<!DOCTYPE html>

		<meta charset="utf-8">
		<title>Grade Calculator
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		
			<h1>SAIT Grade Calculator</h1>
		
			<h1> Grade Calculator </h1>
			
			
			<h2>Your Percentage Grade </h2>
				<p>Your percentage grade is: </p>
			
			<h2>Your Letter Grade </h2>
			<p>Your letter grade is: </p>
			
	
		function setGrades (){
		 var gradeobtained = parseFloat(document.getElementById('enumerator').value);
		var gradepossible = parseFloat(document.getElementById('denominator').value);

		
		
			var numbergrade = (gradeobtained / gradepossible)*100) ; document.getElementById('total').value = numbergrade;
	var percentscore = 
if (numbergrade>=101) {
	document.getElementById("percentgrade").innerHTML = "Sorry, it is not possible to have a grade over 100%"
}
else {
	document.getElementById("percentgrade").innerHTML = numbergrade.value
};

		
	
		var lettergrade = if(numbergrade >= 90){
			document.getElementById('letter').value = "A+";
		}
		
		else if(89 >= numbergrade && numbergrade >= 85){
			document.getElementById('letter').value = "A";
		}
		
		else if(84 >= numbergrade && numbergrade >= 80){
			document.getElementById('letter').value = "A-";
		}
		
		else if(79 >= numbergrade && numbergrade >= 76){
			document.getElementById('letter').value = "B+";
		}
		
		else if(75 >= numbergrade && numbergrade >= 73){
			document.getElementById('letter').value = "B";
		}
		
		else if(72 >= numbergrade && numbergrade >= 70){
			document.getElementById('letter').value = "B-";
		}
		
		else if(69 >= numbergrade && numbergrade >= 66){
			document.getElementById('letter').value = "C+";
		}
		
		else if(65 >= numbergrade && numbergrade >= 63){
			document.getElementById('letter').value = "C";
		}
		
		else if(62 >= numbergrade && numbergrade >= 60){
			document.getElementById('letter').value = "C-";
		}
		
		else if(59 >= numbergrade && numbergrade >= 55){
			document.getElementById('letter').value = "D+";
		}
		
		else if(54 >= numbergrade && numbergrade >= 50){
			document.getElementById('letter').value = "D";
		}
		
		else{
			document.getElementById('letter').value = "F";
		}
	} ;

		
		© Nicole Gillis 2017

Posted 9-Oct-17 18:33pm

Member 13455529

Updated 10-Oct-17 9:52am

Maciej Los

v2

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Answer 1 · 2017-10-09T20:54:00

Go back to your course notes and read them again: you can't just dump javascript code in the middle of a page and hope the browser will magically know that it is not meant to be displayed!

If I was you, I'd start again with "Hello world" and get the concepts and ideas behind that sorted properly in your mind: while it's true that

Quote:
nobody is EVER going to use JavaScript to get a page to say "hello world"

It's about the concepts and starting small so you can easily understand what is going on - and you have clearly missed all of it so far. It's not about "doing something in a more complicated way" it's about "teaching you to crawl before you learn to walk" - and if a baby misses out on that step, he will never be able to run without a massive faceplant every second step...

Patrice T · Answer 2 · 2017-10-10T09:52:00

Your code have numerous problems, the biggest one is that it is not an html page.
This code is too complicated

JavaScript

if(numbergrade >= 90){
	document.getElementById('letter').value = "A+";
}
else if(89 >= numbergrade && numbergrade >= 85){ // you reach this point only if all previous confitions are false
	document.getElementById('letter').value = "A";
}
else if(84 >= numbergrade && numbergrade >= 80){ // you reach this point only if all previous confitions are false
	document.getElementById('letter').value = "A-";
}
...

which lead to simplifying

JavaScript

if(numbergrade >= 90){
	document.getElementById('letter').value = "A+";
}
else if(numbergrade >= 85){
	document.getElementById('letter').value = "A";
}
else if(numbergrade >= 80){
	document.getElementById('letter').value = "A-";
}
...

This rewriting also solve another problem you have.
Your code gives grade 'F' if numbergrade=85.5

This site will help you to learn all you need for webapps.
W3Schools Online Web Tutorials[^]

Creating grade calculator, using score, and possible grade to calculate grade percentage and letter grade, which is to update live. Why won't this code won't work. Please, help!

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Creating grade calculator, using score, and possible grade to calculate grade percentage and letter grade, which is to update live. Why won't this code won't work. Please, help!

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us