I need to create a grader that marks students on their average grade 'A, B' etc but I have-CodePudding

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 onl oad="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>

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

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>