I need to create a grader that marks students on their average grade 'A, B' etc but I have trouble outputing the grade to the webpage. I only need it to show the grade , it works on the console but either i don't know the right function to display on the webpage or my code is just wrong.
here's the code
javascript
var result = '';
const grade = document.getElementById('myGrades')
const myJSTestResults = [40, 15, 55, 70, 80];
const average = (40 + 15 + 55 + 70 + 80)/5;
function jsGrades() {
if (average <= 100 && average >= 80) {
result = console.log(`A`);
}else if (average <= 79 && average >= 70){
result = console.log('B');
}else if (average <= 69 && average >= 60){
result = console.log('C');
}else if (average <= 59 && average >= 50){
result = console.log('D');
}else {
result = console.log('F');
} jsGrades();
grade.innerHTML += `
<div>
<h1>${result}</h1>
</div>
`
}
html
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="loadContent()">
<h1>My favourite languages:</h1>
<ul id="favLanguages"></ul>
<br>
<div id="myGrades">
<button onclick="myGrades()">Grade</button>
</div>
<script src="./arraytask.js"></script>
</body>
</html>
you need to remove console.log and assign the value directly to the result variable.
const grade = document.getElementById('myGrades')
const myJSTestResults = [40, 15, 55, 70, 80];
// Can also use reduce here to calculate the sum of results
const sum = myJSTestResults.reduce((prev, next) => prev += next, 0)
const average = sum / myJSTestResults.length;
function jsGrades() {
let result = 'F';
if (average <= 100 && average >= 80) {
result = 'A';
} else if (average <= 79 && average >= 70) {
result = 'B';
} else if (average <= 69 && average >= 60) {
result = 'C';
} else if (average <= 59 && average >= 50) {
result = 'D';
}
return result
}
function myGrades() {
const result = jsGrades();
grade.innerHTML += `
<div>
<h1>${result}</h1>
</div>
`
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My favourite languages:</h1>
<ul id="favLanguages"></ul>
<br>
<div id="myGrades">
<button onclick="myGrades()">Grade</button>
</div>
<script src="./arraytask.js"></script>
</body>
</html>var result = '';
const grade = document.getElementById('myGrades')
const myJSTestResults = [40, 15, 55, 70, 80];
const average = (40 + 15 + 55 + 70 + 80)/5;
function jsGrades() {
if (average <= 100 && average >= 80) {
result = "A";
}else if (average <= 79 && average >= 70){
result = "B";
}else if (average <= 69 && average >= 60){
result = "C";
}else if (average <= 59 && average >= 50){
result ="D";
}else {
result = "F";
}
console.log(result);
document.getElementById("result").innerHTML = result;
}
then make a div to show the result after the click
<div id="result"></div>
I just make the code more cleaner to understand in better way.
var result = '';
const myJSTestResults = [40, 15, 55, 70, 80];
const average = (40 + 15 + 55 + 70 + 80)/5;
Number.prototype.between = function(max, min) {
return this > min && this < max;
};
function jsGrades() {
if (average.between(100, 80)) {
result = 'A'
}else if (average.between(79, 70)){
result = 'B'
}else if (average.between(69, 60)){
result = 'C'
}else if (average.between(59, 50)){
result = 'D'
}else {
result = 'F'
}
return result;
}
function myGrades() {
document.getElementById('result').innerHTML = jsGrades();
}<button onclick="myGrades()">Grade</button>
<div id="result"></div>You can also achieve to check the number in between the range by using lodash _.inRange